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数组长度问题代码说明
Jan 20 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 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
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
JavaScript模块详解
2017/12/18 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python json格式化打印实现过程解析
2020/07/21 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
在校生自我鉴定
2014/01/23 职场文书
小学学校评估方案
2014/06/08 职场文书
委托书的写法
2014/09/16 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers