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中校验时间格式的正则表达式小结
Sep 22 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JS控制输入框内字符串长度
May 21 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
js实现点击按钮随机生成背景颜色
Sep 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
curl和libcurl的区别简介
2015/07/01 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python脚本定时发送邮件
2020/12/22 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
《小石潭记》教学反思
2014/02/13 职场文书
查摆剖析材料范文
2014/09/30 职场文书
护士求职自荐信
2015/03/25 职场文书
农业项目投资意向书
2015/05/09 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
欢送会主持词
2015/07/01 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers