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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
理解JavaScript事件对象
Jan 25 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
原生js实现简单的链式操作
Jul 04 Javascript
axios post提交formdata的实例
Mar 16 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
vue中轮训器的使用
Jan 27 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php全角字符转换为半角函数
2014/02/07 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python书籍信息爬虫实例
2018/03/19 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
基于python实现复制文件并重命名
2020/09/16 Python
大四自我鉴定范文
2013/10/06 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
餐厅筹备计划书
2014/04/25 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫