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 读取图片文件的大小
Jun 25 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
简单使用webpack打包文件的实现
Oct 29 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python实现八大排序算法(2)
2017/09/14 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python查看列的唯一值方法
2018/07/17 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
装修设计师求职信
2014/02/26 职场文书
我爱我校演讲稿
2014/05/21 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
实战Python爬虫爬取酷我音乐
2022/04/11 Python