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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
详解参数传递四种形式
Jul 21 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js 数据类型转换总结笔记
2011/01/17 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python GAE、Django导出Excel的方法
2008/11/24 Python
python判断字符串是否纯数字的方法
2014/11/19 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python ftplib模块使用代码实例
2019/12/31 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
教师三严三实心得体会
2014/10/11 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年领班工作总结
2015/04/29 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL