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

本文链接：https://blog.csdn.net/bangbt/article/details/5869421

本人是Javascript菜鸟，下面是前几天学习Javascript的旅程心得，希望对和我一样的入门者有点用，也希望高手批评指正。

以问题开始：

  
  
   
   
   
   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”。

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继承，下面会讲到。

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

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

　　　　　
　　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。

原型链

再来分析下第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。

Property Lookup

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

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

上图得知：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，就成了所有对象的“基类”。这就是原型链的继承。

看上图，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属性。

d.constructor会返回什么呢？

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

先看张对老手不新鲜但对菜鸟很有趣的图：

What the heck is that? 简直是luan lun。

new

抛开上面的图，先看看上篇文章留下的第二个问题，让我们在构造器的函数体内加点东西，看会发生什么。

会得到如下结果：

为什么用new关键字构造出来的a，会获得p这个属性？new A()这行代码做了什么事情？根据上篇文章中Function的创建过程第4步，A这个对象会有一个Construct属性（注意不是constructor，Consturct是ECMAScript标准里的属性，好像对外不可见），该属性的值是个函数，new A()即会调用A的这个Construct函数。那么这个Construct函数会做些啥呢？

　　1，创建一个object，假设叫x。

　　2，如果A.prototype是个object（一般都是），则把A.prototype赋给x.__proto__；否则（不常见），请大老板Object出马，把Object.prototype赋给x.__proto__。

　　3，调用A.call(x)，第一个参数传入我们刚刚创建的x。这就妥了，A的函数体里this.p = 1，这个this，就成了x。因此x就有了p这个属性，并且x.p = 1。

　　4，一般情况下，就返回x了，这时a就是x了。但也有特殊情况，如果A的函数体里返回的东西，它的类型(typeof)是个object。那么a就不是指向x了，而是指向A函数返回的东西。

伪代码如下：

  
  
   
   
   
   var
   
    x 
   
   =
   
    
   
   new
   
    Object(); 
   
   //
   
   事实上不一定用new来创建，我也不清楚。
   
   

   
   x.__proto__ 
   
   =
   
    A.prototype 

   
   var
   
    result 
   
   =
   
    A.call(x)

   
   if
   
    (
   
   typeof
   
   (result) 
   
   ==
   
    
   
   "
   
   object
   
   "
   
   ){
    
   
   return
   
    result;
}

   
   return
   
    x;

在我们的例子里，A函数返回undefined（因为没有return字眼），所以a就是x。但我们举个例子，验证下上面第4步里的特殊情况：

果然。

对象的constructor属性

再看看上篇文章留下的第一个问题

  
  
   
   function
   
    Base(){}
Base.prototype.a 
   
   =
   
    
   
   1
   
   

   
   var
   
    base 
   
   =
   
    
   
   new
   
    Base();
 

   
   function
   
    Derived(){}
Derived.prototype 
   
   =
   
    base;

   
   var
   
    d 
   
   =
   
    
   
   new
   
    Derived()

执行完上面的代码，mybase.constructor很容易猜到是Base，那么d.constructor呢？是Derived吗？

不对，也是Base，怎么回事？很简单，复习下上篇的内容就知道：由于d本身没有constructor属性，所以会到d.__proto__上去找，d.__proto__就是Derived.prototype，也就是base这个对象，base也没constructor属性，于是再往上，到base.__proto__上找，也就是Base.prototype。它是有constructor属性的，就是Base本身。事实上，就我目前所知，只有构造器（function类型的object）的prototype，才真正自己拥有constructor属性的对象，且“构造器.prototype.constructor === 构造器”。

Instanceof

那么，instanceof怎么样？

从图中可以看出，d是Base、Derived和Object的实例。很合理，但这是怎么判断的呢？是这样的：对于x instanceof constructor的表达式，如果constructor.prototype在x的原型(__proto__)链里，那么就返回true。很显然，d的__proto__链往上依次是：Derived.prototype, Base.prototype, Object.prototype，得到图中结果就毫无疑问了。所以，instanceof跟对象的constructor属性无关。

Function and Object

最后解答一下文章开头的图。

Function和Object本身也是function类型的对象，因此可以说都是Function()构造出来的东西（自己构造自己，我不知道具体是不是这样，但就这么认为，挺合理的。）

也就是说，可以设想如下代码：

  
  
   
   
   
   var
   
    Function 
   
   =
   
    
   
   new
   
    Function()

   
   var
   
    Object 
   
   =
   
    
   
   new
   
    Function()