脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 面向对象

JavaScript 面向对象基础简单示例

 更新时间：2019年10月02日 10:30:49   作者：kevin.Xiang  
这篇文章主要介绍了JavaScript 面向对象基础,结合简单实例形式分析了JavaScript面向对象程序设计中类的定义、类方法与属性相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript 面向对象。分享给大家供大家参考，具体如下：

JavaScript  面向对象

  • this：this代指对象(python self)
  • 对象 = new 函数()：创建对象：添加“new 函数()”相当与创建对象
  • 类名:prototype={方法} ： 创建类原型

类：

<script>
function Foo(n){
  this.name = n;
  this.sayName = function(){
    console.log(this.name)
  }
}
var obj1 = new Foo('jb51');
obj1.name
obj1.sayName()
var obj2 = new Foo('脚本之家');
obj2.name
obj2.sayName ()
</script>

运行结果：

注：obj1~2 对象内存里会重复调用this.sayName，从而增加内存损耗。
注：创建obj对象并传入参数、obj1.name就是we。
注：obj1.sayNmae() 执行方法 调用obj1的name等于we。

类原型：

<script>
function Foo(n){
  this.name = n;
}
// Foo的原型
Foo.prototype = {
  'sayName': function(){
  console.log(this.name)
  }
}
var obj1 = new Foo('欢迎访问');
obj1.name
obj1.sayName()
var obj2 = new Foo('www.jb51.net');
obj2.name
obj2.sayName()
</script>

运行结果：

注：每一个对象内只封装了一个name。
注：调用obj1.sayName()时会先找Foo类，然后在去Foo的原型里找sayName。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS+CSS实现一个气泡提示框

    JS+CSS实现一个气泡提示框

    气泡提示框牵扯到的技术有：JS响应鼠标的事件、纯CSS制作三角形，附截图及示例代码，感兴趣的朋友可以参考下
    2013-08-08
  • JavaScript实现简单的隐藏式侧边栏功能示例

    JavaScript实现简单的隐藏式侧边栏功能示例

    这篇文章主要介绍了JavaScript实现简单的隐藏式侧边栏功能,涉及javascript结合定时器针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08
  • javascript中获取元素标签中间的内容的实现方法

    javascript中获取元素标签中间的内容的实现方法

    下面小编就为大家带来一篇javascript中获取元素标签中间的内容的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js动态生成唯一id的三种方法

    js动态生成唯一id的三种方法

    这篇文章主要介绍了js动态生成唯一id的两种方法,需要的朋友可以参考下
    2023-05-05
  • html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

    为大家介绍一款JS截图插件html2canvas.js， 它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法，并为大家提供了一个实例
    2020-01-01
  • 浅谈JavaScript中的“!!”作用

    浅谈JavaScript中的“!!”作用

    这篇文章主要介绍了浅谈JavaScript中的“!!”作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 8个开发者必须知道的JavaScript深层概念(推荐)

    8个开发者必须知道的JavaScript深层概念(推荐)

    JavaScript有一个名为“调用堆栈”（Call Stack）的简单列表，它逐一管理任务（堆栈算法），但是当异步任务被传递时，JavaScript会把它弹出到web API，浏览器就会处理它，这篇文章主要介绍了8个开发者必须知道的JavaScript深层概念，需要的朋友可以参考下
    2022-10-10
  • javascript 兼容所有浏览器的DOM扩展功能

    javascript 兼容所有浏览器的DOM扩展功能

    技术文章写得少，所以有时候想写点什么却下不了手，不知道该写什么；往往到了准备要写的时候才发现自己想写的东西其实很无聊，甚至觉得很幼稚，于是又关掉了编缉器
    2012-08-08
  • JavaScript里 ==与===区别详解

    JavaScript里 ==与===区别详解

    这篇文章主要介绍了JavaScript里 ==与===区别详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • 简单实现JS倒计时效果

    简单实现JS倒计时效果

    这篇文章主要教大家如何简单实现JS倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论