从__proto__和prototype来深入理解JS对象和原型链

就标题而言，这是七八篇里起得最满意的，高大上，即使外行人也会不明觉厉！ 


不过不是开玩笑，本文的确打算从

__proto__

和

prototype

这两个容易混淆来理解JS的终极命题之一：对象与原型链。

__proto__

和

prototype

__proto__

引用《JavaScript权威指南》的一段描述：

Every JavaScript object has a second JavaScript object (or null ,

but this is rare) associated with it. This second object is known as a prototype, and the first object inherits properties from the prototype.

翻译出来就是每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法。好啦，既然有这么一个原型对象，那么对象怎么和它对应的？

对象

__proto__

属性的值就是它所对应的原型对象：

var one = {x: 1};
var two = new Object();
one.__proto__ === Object.prototype // true
two.__proto__ === Object.prototype // true
one.toString === one.__proto__.toString // true

上面的代码应该已经足够解释清楚

__proto__

了

。好吧，显然还不够，或者说带来了新的问题：

Object.prototype

是什么？凭什么说

one

和

two

的原型就是

Object.prototype

？

prototype

首先来说说

prototype

属性，不像每个对象都有

__proto__

属性来标识自己所继承的原型，只有函数才有

prototype

属性。

为什么只有函数才有

prototype

属性？ES规范就这么定的。

开玩笑了，其实函数在JS中真的很特殊，是所谓的_一等公民_。JS不像其它面向对象的语言，它没有类（

class

，ES6引进了这个关键字，但更多是语法糖）的概念。JS通过函数来模拟类。

当你创建函数时，JS会为这个函数自动添加

prototype

属性，值是空对象。而一旦你把这个函数当作构造函数（

constructor

）调用（即通过

new

关键字调用），那么JS就会帮你创建该构造函数的实例，实例继承构造函数

prototype

的所有属性和方法（实例通过设置自己的

__proto__

指向承构造函数的

prototype

来实现这种继承）。

小结

虽然对不熟悉的人来说还有点绕，但JS正是通过

__proto__

和

prototype

的合作实现了原型链，以及对象的继承。

构造函数，通过

prototype

来存储要共享的属性和方法，也可以设置

prototype

指向现存的对象来继承该对象。

对象的

__proto__

指向自己构造函数的

prototype

。

obj.__proto__.__proto__...

的原型链由此产生，包括我们的操作符

instanceof

正是通过探测

obj.__proto__.__proto__...
=== Constructor.prototype

来验证

obj

是否是

Constructor

的实例。

回到开头的代码，

two = new Object()

中

Object

是构造函数，所以

two.__proto__

就是

Object.prototype

。至于

one

，ES规范定义对象字面量的原型就是

Object.prototype

。

更深一步的探讨

我们知道JS是单继承的，

Object.prototype

是原型链的顶端，所有对象从它继承了包括

toString

等等方法和属性。

Object

本身是构造函数，继承了

Function.prototype

;

Function

也是对象，继承了

Object.prototype

。这里就有一个_鸡和蛋_的问题：

Object instanceof Function // true
Function instanceof Object // true

什么情况下会出现鸡和蛋的问题呢？就是声明一个包含所有集合的集合啊！好了，你们知道这是罗素悖论，但并不妨碍PL中这样设计。

那么具体到JS，ES规范是怎么说的？

Function本身就是函数，

Function.__proto__

是标准的内置对象

Function.prototype

。

Function.prototype.__proto__

是标准的内置对象

Object.prototype

。

以上均翻译自http://www.ecma-international.org/ecma-262/5.1/#sec-15，_鸡和蛋_的问题就是这么出现和设计的：**`Function`继承`Function`本身，`Function.prototype`继承`Object.prototype`。**

一张图和总结

相信经过上面的详细阐述，这张图应该一目了然了。

Function.prototype

和

Function.__proto__

都指向

Function.prototype

，这就是鸡和蛋的问题怎么出现的。

Object.prototype.__proto__ === null

，说明原型链到

Object.prototype

终止。

Object

和

Function

的鸡和蛋的问题

ES5关于

Object

和

Function

的规定：

Object

Function

从上面的规定再结合其它，理出以下几点：

原型链的尽头（root）是

Object.prototype

。所有对象均从

Object.prototype

继承属性。

Function.prototype

和

Function.__proto__

为同一对象。



这意味着： 

Object

/

Array

/

String

等等构造函数本质上和

Function

一样，均继承于

Function.prototype

。

Function.prototype

直接继承root（

Object.prototype

）。



通过这点我们可以弄清**继承的原型链：

Object.prototype

--->

Function.prototype

--->

Function|Object|Array...

。**如下图所示：




以上3点比较容易理解，或者说规范里就这样定义的。由以上3点导出我们最后的问题：

Object

和

Function

的鸡和蛋的问题。

回答这个问题，必须首先更深入一层去理解

Function.prototype

这个对象，因为它是导致

Function
instanceof Object

和

Object instanceof Function

都为

true

的原因。

回归规范，摘录2点：

Function.prototype

是个不同于一般函数（对象）的函数（对象）。

The Function prototype object is itself a Function object (its [[Class]] is "Function") that, when invoked, accepts any arguments and returns undefined.
The value of the [[Prototype]] internal property of the Function prototype object is the standard built-in Object prototype object (15.2.4). The initial value of the [[Extensible]] internal property of the Function
prototype object is true.
The Function prototype object does not have a valueOf property of its own; however, it inherits the valueOf property from the Object prototype Object.

Function.prototype

像普通函数一样可以调用，但总是返回

undefined

。
普通函数实际上是

Function

的实例，即普通函数继承于

Function.prototype

。

func.__proto__
=== Function.prototype

。

Function.prototype

继承于

Object.prototype

，并且没有

prototype

这个属性。

func.prototype

是普通对象，

Function.prototype.prototype

是

null

。
所以，

Function.prototype

其实是个另类的函数，可以独立于/先于

Function

产生。

Object

本身是个（构造）函数，是

Function

的实例，即

Object.__proto__

就是

Function.prototype

。

The value of the [[Prototype]] internal property of the Object constructor is the standard built-in Function prototype object.
The value of the [[Prototype]] internal property of the Object prototype object is null, the value of the [[Class]] internal property is "Object", and the initial value of the [[Extensible]] internal property is
true.

最后总结：先有

Object.prototype

（原型链顶端），

Function.prototype

继承

Object.prototype

而产生，最后，

Function

和

Object

和其它构造函数继承

Function.prototype

而产生。