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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php之curl设置超时实例
2014/11/03 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
js 获取input点选按钮的值的方法
2014/04/14 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python简单验证码识别的实现方法
2019/05/10 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
建筑学推荐信
2013/11/03 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS