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 相关文章推荐
javascript new后的constructor属性
Aug 05 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue router 配置路由的方法
Jul 26 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
PHP反射基础知识回顾
2020/09/10 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
js几个验证函数代码
2010/03/25 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python selenium firefox使用详解
2019/02/26 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python中请不要再用re.compile了
2019/06/30 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
违反工作纪律检讨书
2014/02/15 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
情况说明书怎么写
2015/10/08 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
mysql函数全面总结
2021/11/11 MySQL
vue递归实现树形组件
2022/07/15 Vue.js