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 Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
JavaScript函数柯里化
Nov 07 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
smarty模板数学运算示例
2016/12/11 PHP
jQuery select控制插件
2009/08/17 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
后勤主管工作职责
2013/12/07 职场文书
心得体会怎么写
2013/12/30 职场文书
承认错误的检讨书
2014/01/30 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
工作简历自我评价
2015/03/11 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
angular异步验证器防抖实例详解
2022/03/31 Javascript