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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
详解使用mpvue开发github小程序总结
Jul 25 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
初识Laravel
2014/10/30 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
php截取视频指定帧为图片
2016/05/16 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python对csv文件追加写入列的方法
2019/08/01 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
如何查看python关键字
2021/01/17 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
SQL Server数据库笔试题和答案
2016/02/04 面试题
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
业务员简历自我评价
2014/03/06 职场文书
施工安全责任书范本
2014/07/24 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
母亲节寄语大全
2015/02/27 职场文书
优秀大学生申请书
2019/06/24 职场文书
Pandas数据类型之category的用法
2021/06/28 Python