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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
详解JS预解析原理
Jun 16 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
function.inc.php超越php
2006/12/09 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
如何提高数据访问速度
2016/12/26 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python操作串口的方法
2015/06/17 Python
浅谈Python中的私有变量
2018/02/28 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python实现推箱子游戏
2020/03/25 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
毕业学生推荐信
2013/12/01 职场文书
小学生获奖感言范文
2014/02/02 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
长征观后感
2015/06/09 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers