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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
树结构之JavaScript
Jan 24 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Pytorch之parameters的使用
2019/12/31 Python
Python简单实现区域生长方式
2020/01/16 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang