共计 6834 个字符，预计需要花费 18 分钟才能阅读完成。
一篇文章让你搞清楚 JavaScript 继承的本质、prototype、__proto__、constructor 都是什么。
很多小伙伴表示不明白 JavaScript 的继承，说是原型链，看起来又像类，究竟是原型还是类？各种 prototype、__proto__、constructor 内部变量更是傻傻搞不清楚。其实，只要明白继承的本质就很能理解，继承是为了代码复用。复用并不一定得通过类，JS 就采用了一种轻量简明的原型方案来实现。Java/C++ 等强类型语言中有类和对象的区别，但 JS 只有对象。它的原型也是对象。只要你完全抛开面向对象的继承思路来看 JS 的原型继承，你会发现它轻便但强大。
目录
继承方案的设计要求
被复用的对象：prototype
优雅的 API：ES6 class
简明的向上查找机制：__proto__
构造函数又是个啥玩意儿
双链合璧：终极全图
总结
参考
继承方案的设计要求
前面我们讲，继承的本质是为了更好地实现代码复用。再仔细思考，可以发现，这里的「代码」指的一定是「数据 + 行为」的复用，也就是把一组数据和数据相关的行为进行封装。为什么呢？因为，如果只是复用行为，那么使用函数就足够了；而如果只是复用数据，这使用 JavaScript 对象就可以了：
const parent = {
some: ‘data’,
}
const child = {
…parent,
uniq: ‘data’,
}
因此，只有数据 + 行为（已经类似于一个「对象」的概念）的封装，才是继承技术所必须出现的地方。为了满足这样的代码复用，一个继承体系的设计需要支持什么需求呢？
存储公用的数据和函数
覆盖被继承对象数据或函数的能力
向上查找 / 调用被继承对象函数的数据或函数的能力
优雅的语法（API）
增加新成员的能力
支持私有数据
「支持私有数据」，这个基本所有方案都没实现，此阶段我们可以不用纠结；而「增加新成员的能力」，基本所有的方案都能做到，也不再赘述，主要来看前四点。
被复用的对象：prototype
JavaScript 的继承有多种实现方式，具体有哪些，推荐读者可阅读：[JavaScript 语言精粹][]一书 和 这篇文章。这里，我们直接看一版比较优秀的实现：
function Animal(name) {
this.name = name
this.getName = function() {
return this.name
}
}
function Cat(name, age) {
Animal.call(this, name)
this.age = age || 1
this.meow = function() {
return `${this.getName()}eowww~~~~~, I’m ${this.age} year(s) old`
}
}
const cat = new Cat(‘Lily’, 2)
console.log(cat.meow()) // ‘Lilyeowww~~~~~, I’m 2 year(s) old’
这个方案，具备增添新成员的能力、调用被继承对象函数的能力等。一个比较重大的缺陷是：对象的所有方法 getName meow，都会随每个实例生成一份新的拷贝。这显然不是优秀的设计方案，我们期望的结果是，继承自同一对象的子对象，其所有的方法都共享自同一个函数实例。
怎么办呢？想法也很简单，就是把它们放到同一个地方去，并且还要跟这个「对象」关联起来。如此一想，用来生成这个「对象」的函数本身就是很好的地方。我们可以把它放在函数的任一一个变量上，比如：
Animal.functions.getName = function() {
return this.name
}
Cat.functions.meow = function() {
return `${this.getName()}eowww~~~~~, I’m ${this.age} year(s) old`
}
但这样调用起来，你就要写 animal.functions.getName()，并不方便。不要怕，JavaScript 这门语言本身已经帮你内置了这样的支持。它内部所用来存储公共函数的变量，就是你熟知的 prototype。当你调用对象上的方法时（如 cat.getName()），它会自动去 Cat.prototype 上去帮你找 getName 函数，而你只需要写 cat.getName() 即可。兼具了功能的实现和语法的优雅。
最后写出来的代码会是这样：
function Animal(name) {
this.name = name
}
Animal.prototype.getName = function() {
return this.name
}
function Cat(name, age) {
Animal.call(this, name)
this.age = age || 1
}
Cat.prototype = Object.create(Animal.prototype, { constructor: Cat})
Cat.prototype.meow = function() {
return `${this.getName()}eowww~~~~~, I’m ${this.age} year(s) old`
}
请注意，只有函数才有 prototype 属性，它是用来做原型继承的必需品。
优雅的 API：ES6 class
然鹅，上面这个写法仍然并不优雅。在何处呢？一个是 prototype 这种暴露语言实现机制的关键词；一个是要命的是，这个函数内部的 this，依靠的是作为使用者的你记得使用 new 操作符去调用它才能得到正确的初始化。但是这里没有任何线索告诉你，应该使用 new 去调用这个函数，一旦你忘记了，也不会有任何编译期和运行期的错误信息。这样的语言特性，与其说是一个「继承方案」，不如说是一个 bug，一个不应出现的设计失误。
而这两个问题，在 ES6 提供的 class 关键词下，已经得到了非常妥善的解决，尽管它叫一个 class，但本质上其实是通过 prototype 实现的：
class Animal {
constructor(name) {
this.name = name
}
getName() {
return this.name
}
}
class Cat extends Animal {
constructor(name, age) {
super(name)
this.age = age || 1
}
meow() {
return `${this.getName()}eowww~~~~~, I’m ${this.age} year(s) old`
}
}
如果你没有使用 new 操作符，编译器和运行时都会直接报错。为什么呢，我们将在 [下一篇文章][] 讲解
extends 关键字，会使解释器直接在底下完成基于原型的继承功能
现在，我们已经看到了一套比较完美的继承 API，也看到其底下使用 prototype 存储公共变量的地点和原理。接下来，我们要解决另外一个问题：prototype 有了，实例对象应该如何访问到它呢？这就关系到 JavaScript 的向上查找机制了。
简明的向上查找机制：__proto__
function Animal(name) {
this.name = name
}
Animal.prototype.say = function() {
return this.name
}
const cat = new Animal(‘kitty’)
console.log(cat) // Animal {name: ‘kitty’}
cat.hasOwnProperty(‘say’) // false
看上面 ???? 一个最简单的例子。打出来的 cat 对象本身并没有 say 方法。那么，被实例化的 cat 对象本身，是怎样向上查找到 Animal.prototype 上的 say 方法的呢？如果你是 JavaScript 引擎的设计者，你会怎样来实现呢？
我拍脑袋这么一想，有几种方案：
在 Animal 中初始化实例对象 cat 时，顺便存取一个指向 Animal.prototype 的引用
在 Animal 中初始化实例对象时，记录其「类型」（也即是 Animal）
// 方案 1
function Animal(name) {
this.name = name
// 以下代码由引擎自动加入
this.__prototype__ = Animal.prototype
}
const cat = new Animal(‘kitty’)
cat.say() // -> cat.__prototype__.say()
// 方案 2
function Animal(name) {
this.name = name
// 以下代码由引擎自动加入
this.__type__ = Animal
}
const cat = new Animal(‘kitty’)
cat.say() // -> cat.__type__.prototype.say()
究其实质，其实就是：实例对象需要一个指向其函数的引用（变量），以拿到这个公共原型 prototype 来实现继承方案的向上查找能力。读者如果有其他方案，不妨留言讨论。
无独有偶，这两种方案，在 JavaScript 中都有实现，只不过变量的命名与我们的取法有所差异：第一种方案中，实际的变量名叫 __proto__ 而不是 __prototype__；第二种方案中，实际的变量名叫 constructor，不叫俗气的 __type__。实际上，用来实现继承、做向上查找的这个引用，正是 __proto__；至于 constructor，则另有他用。不过要注意的是，尽管基本所有浏览器都支持 __proto__，它并不是规范的一部分，因此并不推荐在你的业务代码中直接使用 __proto__ 这个变量。
从上图可以清楚看到，prototype 是用来存储类型公共方法的一个对象（正因此每个类型有它基本的方法），而 __proto__ 是用来实现向上查找的一个引用。任何对象都会有 __proto__。Object.prototype 的 __proto__ 是 null，也即是原型链的终点。
构造函数又是个啥玩意儿？
再加入 constructor 这个东西，它与 prototype、__proto__ 是什么关系？这个地方，说复杂就很复杂了，让我们尽量把它说简单一些。开始之前，我们需要查阅一下语言规范，看一些基本的定义：
对象：[对象是一组集合，其中可包含零个或多个属性。对象都有一个原型对象（译者注：即 [[Prototype]]/__proto__）][specification: overview]
函数：是对象类型的一员
构造函数：构造函数是个用于创建对象的函数对象。每个构造函数都有一个 prototype 对象，用以实现原型式继承，作属性共享用
这里说明了什么呢？说明了构造函数是函数，它比普通函数多一个 prototype 属性；而函数是对象，对象都有一个原型对象 __proto__。这个东西有什么作用呢？
上节我们深挖了用于继承的原型链，它链接的是原型对象。而对象是通过构造函数生成的，也就是说，普通对象、原型对象、函数对象都将有它们的构造函数，这将为我们引出另一条链——
在 JavaScript 中，谁是谁的构造函数，是通过 constructor 来标识的。正常来讲，普通对象（如图中的 cat 和 {name: ‘Lin’} 对象）是没有 constructor 属性的，它是从原型上继承而来；而图中粉红色的部分即是函数对象（如 Cat Animal Object 等），它们的原型对象是 Function.prototype，这没毛病。关键是，它们是函数对象，对象就有构造函数，那么函数的构造函数是啥呢？是 Function。那么问题又来了，Function 也是函数，它的构造函数是谁呢？是它自己：Function.constructor === Function。由此，Function 即是构造函数链的终结。
上面我们提到，constructor 也可以用来实现原型链的向上查找，然后它却别有他用。有个啥用呢？一般认为，它是用以支撑 instanceof 关键字实现的数据结构。
双链合璧：终极全图
好了，是时候进入最烧脑的部分了。前面我们讲了两条链：
原型链。它用来实现原型继承，最上层是 Object.prototype，终结于 null，没有循环
构造函数链。它用来表明构造关系，最上层循环终结于 Function
把这两条链结合到一起，你就会看到一条双螺旋 DNA 这几张你经常看到却又看不懂的图：
图都是引用自其它文章，点击图片可跳转到原文。其中，第一篇文章 [一张图理解 JS 的原型][] 是我见过解析得最详细的，本文的很多灵感也来自这篇文章。
理解了上面两条链以后，这两个全图实际上就不难理解了。分享一下，怎么来读懂这个图：
首先看构造函数链。所有的普通对象，constructor 都会指向它们的构造函数；而构造函数也是对象，它们最终会一级一级上溯到 Function 这个构造函数。Function 的构造函数是它自己，也即此链的终结；
Function 的 prototype 是 Function.prototype，它是个普通的原型对象；
其次看原型链。所有的普通对象，__proto__ 都会指向其构造函数的原型对象 [Class].prototype；而所有原型对象，包括构造函数链的终点 Function.prototype，都会最终上溯到 Object.prototype，终结于 null。
也即是说，构造函数链的终点 Function，其原型又融入到了原型链中：Function.prototype -> Object.prototype -> null，最终抵达原型链的终点 null。至此这两条契合到了一起。
总结下来，可以概括成这几句话：
JS 世界的变量除了普通类型外都是对象，包括函数也是对象
所有对象都必须由函数生成，包括普通对象、原型对象及函数对象
所有函数最终都生成自 Function，包括 Function 自己
所有对象最终都继承自 Object.prototype，包括 Function.prototype，终止于 null
这里还有最后一个所谓「鸡生蛋还是蛋生????」的问题：是先有 Object.prorotype，还是先有 Function？如果先有前者，那么此时 Function 还不在，这个对象又是由谁创建呢？如果先有后者，那么 Function 也是个对象，它的原型 Function.prototype.__proto__ 从哪去继承呢？这个问题，看似无解。但从 这篇文章：从__proto__和 prototype 来深入理解 JS 对象和原型链 中，我们发现了一个合理的解释，那就是：
Object.prototype 是个神之对象。它不由 Function 这个函数构造产生。
证据如下：
Object.prototype instanceof Object // false
Object.prototype instanceof Function // false
Object.prototype.__proto__ === Function.prototype // false
JS 对象世界的构造次序应该是：Object.prototype -> Function.prototype -> Function -> Object -> …
总结
讲到这里，我想关于 JavaScript 继承中的一些基本问题可以解释清楚了：
JavaScript 继承是类继承还是原型继承？不是使用了 new 关键字么，应该跟类有关系吧？
是完全的原型继承。尽管用了 new 关键字，但其实只是个语法糖，跟类没有关系。JavaScript 没有类。它与类继承完全不同，只是长得像。好比雷锋和雷峰塔的关系。
prototype 是什么东西？用来干啥？
prototype 是个对象，只有函数上有。它是用来存储对象的属性（数据和方法）的地方，是实现 JavaScript 原型继承的基础。
__proto__ 是什么东西？用来干啥？
__proto__ 是个指向 prototype 的引用。用以辅助原型继承中向上查找的实现。虽然它得到了所有浏览器的支持，但并不是规范所推荐的做法。严谨地说，它是一个指向 [[Prototype]] 的引用。
constructor 是什么东西？用来干啥？
是对象上一个指向构造函数的引用。用来辅助 instanceof 等关键字的实现。
???? 生蛋还是蛋生????？
神生鸡，鸡生蛋。
参考
一张图理解 JS 的原型
Prototypal Inheritance in JavaScript
How Prototypal Inheritance really works
ECMAScript 2015(ES6) Specification
从__proto__和 prototype 来深入理解 JS 对象和原型链
JavaScript 深入之继承的多种方法
[MDN: Inheritance in JavaScript][]
[MDN: Inheritance and the prototype chain][]
[MDN: Details of the object model][]
[MDN: __proto__][]