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 相关文章推荐
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
js实现简单选项卡功能
Mar 23 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Node绑定全局TraceID的实现方法
Nov 14 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
六一儿童节演讲稿
2014/05/23 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
优秀应届生求职信
2014/06/16 职场文书
小学元宵节活动总结
2015/02/06 职场文书
爱心募捐通知范文
2015/04/27 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
周一问候语大全
2015/11/10 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
pandas 实现将NaN转换为None
2021/05/14 Python
详解Python requests模块
2021/06/21 Python