JavaScript六种继承方式的递进推演

1. 原型链继承

function Parent1() {this.name = "Parent1"this.son = [1]
}
// 需要继承的子类
function Child1() {this.age = 18
}
// 修改Child1的原型对象
Child1.prototype = new Parent1()  // 用new创建一个父类的匿名实例对象// Child1的实例对象可以获取到自己构造函数的原型对象（即new Parent1()）的属性和方法了
const c1 = new Child1()
console.log(c1.name)   // Parent1
console.log(c1.__proto__)  // Parent1 { name: 'Parent1', son: [ 1 ] }

不过这样会存在一个潜在问题：

// 再创建一个子类的实例对象
const c2 = new Child1()
c2.son.push(2)
console.log(c1.son, c2.son)  //[ 1, 2 ] [ 1, 2 ]

可以看到修改c2的son属性，c1的son属性也跟着变了。这是因为两个实例使用的是同一个原型对象，内存空间是共享的。

当然如果换种方式修改是不会影响其他实例对象的：

c2.son = [1, 2]
conosle.log(c1.son, c2.son)  //[1], [1,2]

2. 构造函数继承

function Parent2() {this.name = "parent2"this.son = [1]
}function Child2() {// 执行Parent构造函数，借用call修改this指向为子类Child2Parent2.call(this)this.age = 18
}
const c1 = new Child2()
console.log(c1.name)  // Parent2// 不会有原型链继承的问题了
const c2 = new Child2()
c2.son.push(2)
console.log(c1.son, c2.son)  // [1], [1, 2]

因为每次调用构造函数就会开辟一块新的内存空间，所以是不会存在原型链继承共用内存空间的问题。

但是又会出现新的问题：

Parent2.prototype.getName = function() {return this.name
}
console.log(c2.getName())  // TypeError: c2.getName is not a function

可以看到，构造函数继承中，子类无法继承父类原型上的方法。

3. 组合继承

function Parent3() {this.name = "parent3"this.son = [1]Parent3.prototype.getName = function() {return this.name}
}function Child3() {// 这一步让子类拥有了父类的实例属性和方法Parent3.call(this)   // 第二次调用Parent3this.age = 18
}// 手动挂上构造器，同时指回自己的构造函数
// 这两步让子类拥有了父类原型的属性和方法
Child3.prototype = new Parent3()   // 第一次调用 Parent3()
Child3.prototype.constructor = Child3  // 这一步不写似乎也可以，但是为避免意料之外的其他问题，最好还是加上const c1 = new Child3()
const c2 = new Child3()
c1.son.push(2)
console.log(c1.son, c2.son)  // [ 1, 2 ] [ 1 ]  不会互相影响
console.log(c1.getName(), c2.getName())  // parent3 parent3

结合上述两种继承方式的优缺点，可以轻松的写出这种组合继承的方法。

思路很简单：用构造函数继承实例属性和方法，用原型链继承原型属性和方法。

这种方式是最JS中最常用的继承方式，但是仍然存在问题：

缺点也很直观：一次继承需要调用两次父类，这就造成了额外的性能开销（多构造了一次），如果父类的共有属性和方法极多，那么会大大降低执行效率。

4. 原型式继承

Object.create(proto [,descriptors]) —— 利用给定的 proto 作为 [[Prototype]] 和可选的属性描述来创建一个空对象。

可以用如下代码表述其原理（来自第二篇参考文章，红宝书中的一段引用）：
function object(o) {function F() {}; //临时构造函数F.prototype = o; //传入对象o作为临时构造函数的原型对象return new F(); //返回临时构造对象实例
}

const parent4 = {name: "parent4",friends: ["p1", "p2", "p3"],getName: function() {return this.name;}};const s1 = Object.create(parent4);const s2 = Object.create(parent4);s1.name = "tom";s1.friends.push("jerry");s2.friends.push("lucy");console.log(s1.name); // tomconsole.log(s1.name === s1.getName()); // trueconsole.log(s2.name); // parent4console.log(s1.friends); // ["p1", "p2", "p3","jerry","lucy"]console.log(s2.friends); // ["p1", "p2", "p3","jerry","lucy"]

根据我个人的研究，也可以用其他方式取代 Object.create() ：
//（代码接上）
// 根据上面的原理代码，我们可以知道，Object.create()本质上最终修改的是对象的 [[prototype]] 隐藏属性，这个属性可以用__proto__获取到：
console.log(s1.__proto__ === parent4)  // true//那么直接使用__proto__也是可以的：
const s3 = {}
s3.__proto__ = parent4//或者使用Object.setPrototypeOf()：
const s4 = {}
Object.setPrototypeOf(s4,parent4)
这样只是为了方便理解，这种继承方式肯定是推荐使用Object.create()的。关于这三种方法可以参考下这篇文章：原型方法，没有 proto 的对象

这种继承方式的缺点也很明显，因为Object.create方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能。

5. 寄生式继承

寄生式继承也没啥好说的，只是在上面继承的基础上做了点优化（因此缺点也是一样的），可以自主添加一些方法以增强功能：

const parent5 = {name: "parent5",friends: ["p1", "p2", "p3"],getName: function() {return this.name}
}// 封装一个继承的方法
function inherit(original) {let inherit = Object.create(original);// 需要额外添加的方法inherit.getFriends = function() {return this.friends}return inherit
}const person5 = clone(parent5)console.log(person5.getName()); // parent5
console.log(person5.getFriends()); // ["p1", "p2", "p3"]

6. 寄生组合式继承

寄生组合继承利用寄继承的核心方法：Object.create() 优化了组合继承会额外执行一次父类构造函数的问题：

// 整段代码还是组合继承的代码：
function Parent3() {this.name = "parent3"this.son = [1]Parent3.prototype.getName = function() {return this.name}// 可以加上代码测试：// console.log(this)  // 组合式继承会多打印一次this，这个this是父类构造函数即Parent3// 而寄生组合式继承只会在创建实例对象时执行一次，打印对应的this即C1
}
function Child3() {Parent3.call(this)this.age = 18
}// Child3.prototype = new Parent3()
// 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程
Child3.prototype = Object.create(Parent3.prototype)   // ！！！核心（主要就是替换了这一句代码）
Child3.prototype.constructor = Child3const c1 = new Child3()
console.log(c1.son)
console.log(c1.getName())

它利用 Object.create() 创建了父类构造函数原型的（副本）浅复制，并将其赋值给子类构造函数的原型，这样子类的实例对象就可以访问到父类的原型属性和方法，同时它不会额外调用一次父类。

同样的，根据在原型式继承里的探究，这句核心代码也可以用如下代码代替（当然，仅仅作一个探讨）：
Child3.prototype.__proto__ = Parent3.prototype
//或者
Object.setPrototypeOf(Child3.prototype, Parent3.prototype)

寄生组合继承模式是目前最优的继承方式，其实ES6的extends的语法糖本质上也正与这种继承方式基本类似。

以上六种继承方式的简单总结：

7. ES6 - extends

直接一段代码结束吧：

class Car {constructor(width,speed) {this.width = widththis.speed = speed}
}
class Truck extends Car {constructor(width,speed){super(width,speed)this.width = 7  // 覆盖this.Container = true //重写}
}
const truck = new Truck(6,40)
console.log(truck);  // Truck { width: 7, speed: 40, Container: true }

参考文章：

面试官：Javascript如何实现继承？

寄生组合式继承

原型方法，没有 proto 的对象