探究JS常见的6种继承方式

继承可以使得子类别具有父类的各种方法和属性

继承方法：

一、原型链继承

原型链继承是比较常见的继承方式之一其中涉及的构造函数、原型和实例

三者之间存在着一定的关系：

每一个构造函数都有一个原型对象
原型对象又包含一个指向构造函数的指针
而实例则包含一个原型对象的指针

function Parent1() {
  this.name = 'parent1'
  this.play = [1, 2, 3]
}
function Child1() {
  this.type = 'child1'
}
Child1.prototype = new Parent1()
console.log(new Child1())

上面代码看似没有问题，虽然父类的方法和属性都能够访问,但其实有一个潜在的问题，下面例子来说明这个问题

var s1 = new Child1()
var s2 = new Child1()
s1.play.push(4)
console.log(s1.play, s2.play)
// [1,2,3,4],[1,2,3,4]

上面代码明明只改变了s1的play属性，为啥s2的属性也跟着改变了，原因很简单，因为两个实例使用的是同一个原型对象，他们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行变化。这就是使用原型链继承方式的缺点

二、构造函数继承（借助call）

构造函数的优缺点：
优点：它使父类引用属性不会被共享，优化了第一种继承方式的弊端。
缺点：只能继承父类的实例属性和方法，不能继承原型属性和方法

function Parent2() {
  this.name = 'parent2'
}
Parent2.prototype.getName = function() {
  return this.name
}
function Child1() {
  Parent2.call(this)
  this.type = 'child2'
}
let child = new Child1()
console.log(child) // Child1 {name: "parent2", type: "child2"}
console.log(child.getName()) // child.getName is not a function

三、组合继承（前两种组合）

function Parent3() {
  this.name = 'parent3'
  this.play = [1, 2, 3]
}
Parent3.prototype.getName = function() {
  return this.name
}
function Child3() {
  // 第二次调用 Parent3()
  Parent3.call(this)
  this.type = 'child3'
}
// 第一次调用 Parent3()
Child3.prototype = new Parent3()
// 手动挂上构造器，指向自己的构造函数
Child3.prototype.constructor = Child3
var s3 = new Child3()
var s4 = new Child3()
s3.play.push(4)
console.log(s3.play, s4.play) //[1, 2, 3, 4] , [1, 2, 3]
console.log(s3.getName()) //parent3
console.log(s4.getName()) //parent3

上面代码解决了前两种方法的问题，又有了新的问题，通过上面的注释，我们可以看到Parent3被调用了两次，第一次是改变Child3的prototype的时候，第二次通过call调用Parent3的时候，那么Parent3多构造一次就多进行了一次性能开销。

四、原型式继承（Object.create()）

该方法接收两个参数：
1、用作新对象原型的对象
2、为新对象定义额外属性的对象（可选参数）

let parent4 = {
  name: 'parent4',
  friends: ['p1', 'p2', 'p3'],
  getName: function() {
    return this.name
  }
}
let person4 = Object.create(parent4)
person4.name = 'tom'
person4.friends.push('jerry')

let person5 = Object.create(parent4)
person5.friends.push('lucy')

console.log(person4.name) // tom
console.log(person4.name === person4.getName()) // true
console.log(person5.name) // parent4
console.log(person4.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
console.log(person5.friends) // ["p1", "p2", "p3", "jerry", "lucy"]

上面代码通过Object.create()方法可以实现普通对象的继承，不仅能继承属性，同样也能继承getName()方法

五、寄生式继承

使用原型式继承可以获得一份目标对象的浅拷贝，然后利用这个浅拷贝的能力再进行增强，添加一些方法，这样的继承方式，称为寄生式继承。
虽然优缺点和原型式继承一样，但对于普通对象的继承方式来说，寄生式继承相比于原型式继承还是在父类基础上添加了更多的方法。

let parent5 = {
  name: 'parent5',
  friends: ['p1', 'p2', 'p3'],
  getName: function() {
    return this.name
  }
}
function clone(original) {
  let clone = Object.create(original)
  clone.getFriends = function() {
    return this.friends
  }
  return clone
}
let person5 = clone(parent5)

console.log(person5.getName()) // parent5
console.log(person5.getFriends()) // ["p1", "p2", "p3"]

通过上面代码，我们可以看到person5是通过寄生式继承生成的实例，它不仅仅有getName方法,而且最后也用了getFriends方法，从最后输出的结果中可以看到person5通过clone方法添加了getFriends方法,从而使person5这个普通对象在继承过程中又增加了一个方法，这样的继承方式就是寄生式继承。

六、寄生组合式继承

在前面这几种继承方式的优缺点基础上进行改造，得出了寄生组合式的继承方式，这也是所有继承方式里面相对最优的继承方式。

function clone(parent, child) {
  // 这里改用Object.create就可以减少组合继承中多进行一次构造的过程
  child.prototype = Object.create(parent.prototype)
  child.prototype.constructor = child
}

function Parent6() {
  this.name = 'parent6'
  this.play = [1, 2, 3]
}

Parent6.prototype.getName = function() {
  return this.name
}

function Child6() {
  Parent6.call(this)
  this.friends = 'child6'
}

clone(Parent6, Child6)

Child6.prototype.getFriends = function() {
  return this.friends
}

let person6 = new Child6()

console.log(person6) // Child6 {name: "parent6", play: Array(3), friends: "child6"}
console.log(person6.getName()) // parent6
console.log(person6.getFriends()) // child6

总结

总结结构图

探究JS常见的6种继承方式