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 测试及效验工具
Apr 18 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
javascript动态创建链接的方法
May 13 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
elementUI select组件使用及注意事项详解
May 29 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
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jquery map方法使用示例
2014/04/23 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
js倒计时抢购实例
2015/12/20 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Django如何自定义分页
2018/09/25 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
自主招生推荐信范文
2014/05/10 职场文书
上课不认真检讨书
2014/09/17 职场文书
2015年三万活动总结
2015/03/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书
2015年教师党员个人总结
2015/11/24 职场文书