JavaScript 原型继承之精髓
一篇文章让你搞清楚 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看上面