Javascript之旅 对象的原型链之由来


Posted in Javascript onAugust 25, 2010

以问题开始:

function Base(){}var base = new Base()
上面两行代码会创建几个对象(object)?

要回答这个问题,先明确一下Javascript里object的概念。

Objects

在Javascript里,几乎一切都是object(Arrays、Functions、Numbers、Objects……),而没有C#里的class的概念。object的本质是一个name-value pairs的集合,其中name是string类型的,可以把它叫做“property”,value包括各种objects(string,number,boolean,array,function…),指的是property的值。

typeof

既然object包含Arrays、Functions、Numbers、Objects……,那怎么区分这些呢?答案是typeof。 typeof返回一个字符串,如typeof(Null) = “object”,typeof(false) = “Boolean”, typeof(1) = “number”。既然总是返回字符串,那么对于typeof (typeof x),不管x是什么,总是返回”string”。

Javascript之旅 对象的原型链之由来

Constructor

JS里没有class,也就没有class里的构造函数,那么object是怎么被创建的呢?用构造器:constructor。constructor其实就是Function,因此本身也是object。开头的function Base(){}就是一个构造器,var b = new Base()就是用这个构造器(通过关键字new)创建了一个叫b的object。至此我们可以得出结论,开头的两行代码至少创建了2个object:一个是Base,类型为function的object,一个是base,类型为object的object。

 

Function()和Object()

这是两个重要的预定义好的构造器。一切function(比如开头的Base())都是由Function()构造出来的;而Object的prototype将会被所有object继承,下面会讲到。

Javascript之旅 对象的原型链之由来

 

Function的创建过程

当执行function Base(){this.a = 1}时,相当于var Base = new Function(“this.a = 1”),也就是说,这行代码本身,将使用预定义好的Function() constructor,来构造一个function型object(即Base)出来。在这个创建过程中,js将做哪些事呢?

1, 首先当然会创建一个object起来,Base指向这个object。typeof 这个object = “function”

 Javascript之旅 对象的原型链之由来

2, 给Base附上__proto__属性,让它等于Function这个构造器的prototype(也是预定义好的)。这是很重要的一步,也是规律性的一步。(规律:)在执行任意类似varx = new X()时,都会把X的prototype赋给x的__proto__,也就是说,x.__proto__和X.prototype此时会指向同一个对象。

 Javascript之旅 对象的原型链之由来

3, 为Base创建call属性,该属性是个function。因此我们可以这样写:Base.Call()

 Javascript之旅 对象的原型链之由来

4, 为Base创建Construct属性,该属性也是个function。在执行var base = new Base()时,即会调用这个Construct属性。

5, 为Base创建Scope,Length等属性,略。

6, 为Base创建prototype属性:先用new Object()创建一个对象,为这个对象创建一个属性叫constructor,该属性值设置为Base。再把Base的prototype设置为这个新创建的对象。伪代码如下:

var x = new Object();
x.constructor = Base;
Base.prototype = x;

 

先把关注点放到2和6。

 

__proto__和prototype

从2可以看出来,任意一个用构造器构造出来的object(包括Objects和Functions),都会有__proto__属性,指向该构造器的prototype属性。注意__proto__是个私有属性,在IE上是看不到的,我用的是chrome,可以看到。

从6可以看出,任意一个用new Function()构造出来的functions,都会有prototype属性,该属性是用new Object()构建出来的,初始公开属性只有一个constructor。

Javascript之旅 对象的原型链之由来

 

原型链

再来分析下第6步的伪代码,也就是为function创建prototype的这一步:

var x = new Object(); // 参见2中的规律,会有x.__proto__= Object.prototype。
x.constructor = Base;
Base.prototype = x;

此时我们用Base()构造一个对象出来:

var base= new Base(); // 参见2中的规律,会有base.__proto__ = Base.prototype,也就是 = x。


  // 因此有base.__proto__.__proto__ = x.__proto__

 // 而x.__proto__ = Object.prototype(见上一个代码片段)
 // 所以,base.__proto__.__proto__ = Object.prototype.

__proto__.__proto__,这就是传说中JS对象的原型链!由于用Function()创建构造器时的关键的第6步,保证了所有object的原型链的顶端,最终都指向了Object.prototype。

Javascript之旅 对象的原型链之由来

 

Property Lookup

而我们如果要读某个object的某个属性,JS会怎么做呢?

比如有个object叫xxx,我们执行alert(xxx.a),也就是读取xxx的a属性,那么JS首先会到xxx本身去找a属性,如果没找到,则到xxx.__proto__里去找a属性,由此沿着原型链往上,找到即返回(没找到,则返回undefined)。可以来看个例子:

Javascript之旅 对象的原型链之由来

上图得知:base本身是没有constructor属性的,但是base.constructor确实能返回Base这个函数,原因就在于base.__proto__有这个属性。(base.__proto__是啥?就是Base.prototype,上面构建Function的第6步的伪代码里,为Base.prototype.constructor赋值为Base本身。)

 

Object作为“基类”

另外,由于任意object的原型链的顶端都是Object.prototype。所以,Object.prototype里定义的属性,就会通过原型链,被所有的object继承下来。这样,预定义好的Object,就成了所有对象的“基类”。这就是原型链的继承。

Javascript之旅 对象的原型链之由来

看上图,Object.prototype已经预定义好了一些属性,我们再追加一条属性叫propertyA,那么这个属性和预定义属性一样,都可以从base上读到。

 

原型继承

已经得知,

对于 var xxx =new Object(); 有xxx.__proto__= Object.prototype;

对于 var xxx =new Base(); 有xxx.__proto__.__proto__= Object.prototype;

看上去很像什么呢?从c#角度看,很像Base是Object的子类,也就是说,由Base()构造出来的object,比由Object()构造出来的object,在原型链上更低一个层级。这是通过把Base.prototype指向由Object()创建的对象来做到的。那么自然而然,如果我想定义一个继承自Base的构造器,只需把改构造器的prototype指向一个Base()构造出来的对象。

function Derived(){}
var base = new Base();
Derived.prototype = base;
var d = newDerived(); //很容易推算出:d.__proto__.__proto__.__proto__ = Object.prototype.

推算过程:d.__proto__指向Derived.prototype,也就是base;则__proto__.__proto__指向base.__proto__,也就是Base.prototype,也就是某个new object()创建出来的东东,假设是o;则__proto__.__proto__.__proto__指向o.__proto__,也就是Object.prototype。

 

回答开头的问题,以及几个新的问题

那两行代码至少创建了三个对象:Base、base、Base.prototype。顺便说说,base是没有prototype属性的,只有function类型的object,在被构建时才会被创建prototype属性。

Javascript之旅 对象的原型链之由来

 

d.constructor会返回什么呢?

构造器Base()和Derived()里都是空的,如果有代码,将会怎么被执行呢?

……

待续。见下篇

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
XML的代替者----JSON
Jul 21 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
js实现炫酷光感效果
Sep 05 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 #Javascript
jquery下组织javascript代码(js函数化)
Aug 25 #Javascript
jquery实现居中弹出层代码
Aug 25 #Javascript
jquery下实现overlay遮罩层代码
Aug 25 #Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 #Javascript
javascript下string.format函数补充
Aug 24 #Javascript
javascript下利用arguments实现string.format函数
Aug 24 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
js自带函数备忘 数组
2006/12/29 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
js+css在交互上的应用
2010/07/18 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python求crc32值的方法
2014/10/05 Python
Python 调用Java实例详解
2017/06/02 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Numpy的简单用法小结
2019/08/28 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
财务管理专业推荐信
2013/11/19 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
芙蓉镇观后感
2015/06/10 职场文书
组织委员竞选稿
2015/11/21 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript