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

原文： 从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属性的对象，不是空对象。而一旦你把这个函数当作构造函数（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设计缺陷

那么具体到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。

一张图和总结
[站外图片上传中...(image-7c1925-1562843139042)]

图片来自 mollypages.org

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

1. Function.prototype和Function.__proto__都指向Function.prototype，这就是鸡和蛋的问题怎么出现的。
2. Object.prototype.__proto__ === null，说明原型链到Object.prototype终止。

其他总结

1. 原型链的尽头（root）是Object.prototype。所有对象均从Object.prototype继承属性。

Object.prototype

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

2. Function.prototype和Function.__proto__为同一对象。

Function.prototype
ƒ () { [native code] }

Function.__proto__
ƒ () { [native code] }

3. Function.prototype直接继承root（Object.prototype）。

Function.prototype.__proto__ === Object.prototype
true
Function.prototype instanceof Object
true
Function.prototype instanceof Function
false
Function instanceof Function
true
Array instanceof Function
true
Object instanceof Function
true
Function instanceof Object
true

最后总结：先有Object.prototype（原型链顶端），Function.prototype继承Object.prototype而产生，最后，Function和Object和其它构造函数继承Function.prototype而产生。