Javascript 学习笔记之 对象篇(二) : 原型对象


Posted in Javascript onJune 24, 2014

Javascript 是唯一一个被广泛运用的原型式继承的语言,所以理解两种继承方式的差异是需要时间的。

第一个主要差异就是 Javascript 使用原型链来继承:

function Foo() {
 this.value = 42;
}
Foo.prototype = {
 method: function() {}
};
function Bar() {}

设置 Bar 的 prototype 为 Foo 的对象实例:

Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

确保 Bar 的构造函数为本身,并新建一个 Bar 对象实例:

Bar.prototype.constructor = Bar;
var test = new Bar();

下面我们来看下整个原型链的组成:

test [instance of Bar]
 Bar.prototype [instance of Foo]
 { foo: 'Hello World' }
 Foo.prototype
  { method: ... }
  Object.prototype
  { toString: ... /* etc. */ }

在上面的例子中,对象 test 将会同时继承 Bar.prototype 和 Foo.prototype。因此它可以访问定义在 Foo 中的函数 method。当然,它也可以访问属性 value。需要提到的是,当 new Bar() 时并不会创建一个新的 Foo 实例,而是重用它原型对象自带的 Foo 实例。同样,所有的 Bar 实例都共享同一个 value 属性。我们举例说明:

test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

原型链查找机制

当访问一个对象的属性时,Javascript 会从对象本身开始往上遍历整个原型链,直到找到对应属性为止。如果此时到达了原型链的顶部,也就是上例中的 Object.prototype,仍然未发现需要查找的属性,那么 Javascript 就会返回 undefined 值。

原型对象的属性

尽管原型对象的属性被 Javascript 用来构建原型链,我们仍然可以值赋给它。但是原始值复制给 prototype 是无效的,如:

function Foo() {}
Foo.prototype = 1; // no effect

这里讲个本篇的题外话,介绍下什么是原始值:
在 Javascript 中,变量可以存放两种类型的值,分别是原始值和引用值。

1.原始值(primitive value):

原始值是固定而简单的值,是存放在栈 stack 中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
原始类型有以下五种型: Undefined, Null, Boolean, Number, String。

2.引用值(reference value):

引用值则是比较大的对象,存放在堆 heap 中的对象,也就是说,存储在变量处的值是一个指针  pointer,指向存储对象的内存处。所有引用类型都集成自 Object。
原型链性能问题

如果需要查找的属性位于原型链的上端,那么查找过程对于性能而言无疑会带来负面影响。当在性能要求必要严格的场景中这将是需要重点考虑得因素。此外,试图查找一个不存在属性时将会遍历整个原型链。
同样,当遍历一个对象的属性时,所有在原型链上的属性都将被访问。

总结

理解原型式继承是写较为复杂的 Javascript 代码的前提,同时要注意代码中原型链的高度。当面临性能瓶颈时要学会将原型链拆分开来。此外,要将原型对象 prototype 和原型 __proto__ 区分开来,这里主要讨论原型对象 prototype 就不阐述关于原型 __proto__ 的问题了,

Javascript 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 #Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 #Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 #Javascript
a标签click和href执行顺序探讨
Jun 23 #Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 #Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 #Javascript
jquery用data方法获取某个元素上的事件
Jun 23 #Javascript
You might like
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
jquery 常用操作方法
2010/01/28 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
电子信息毕业生自荐信
2013/11/16 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
财政专业求职信范文
2014/02/19 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
新年晚会主持词
2014/03/24 职场文书
教师业务学习材料
2014/12/16 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
员工福利申请报告
2015/05/15 职场文书
PHP中->和=>的意思
2021/03/31 PHP
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
golang连接MySQl使用sqlx库
2022/04/14 Golang
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers