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 判断浏览器类型及版本
Feb 21 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php中长文章分页显示实现代码
2012/09/29 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
浅谈关于axios和session的一些事
2017/07/13 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
python实现学生信息管理系统
2020/04/05 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
学习python分支结构
2019/05/17 Python
给我一面国旗 python帮你实现
2019/09/30 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python中什么是面向对象
2020/06/11 Python
python让函数不返回结果的方法
2020/06/22 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
小学少先队活动方案
2014/02/18 职场文书
爱的教育观后感
2015/06/17 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android