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打印网页部分内容的脚本
Nov 17 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 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
谈谈新手如何学习PHP
2006/12/23 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
详解python中的lambda与sorted函数
2020/09/04 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
工程班组长岗位职责
2013/12/30 职场文书
化妆品店促销方案
2014/02/24 职场文书
中秋寄语大全
2014/04/11 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
高中班主任评语
2014/12/30 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server