JS实现继承的方式

假设有如下父类

function Parent(name){
  this.name = name
  this.show = function(){
    console.log(this.name)
  }
}
Parent.prototype.age = 10

1. 构造函数继承

/*
* 构造函数继承
*/
function Child(name){
  Parent.apply(this, arguments)   //重点
}

var c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // undefined

• 重点：
  用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
• 特点：
  1. 只继承了父类构造函数的属性，没有继承父类原型的属性
  2. 可以继承多个构造函数属性（call多个）
  3. 在子实例中可向父实例传参
• 缺点：
  1. 只能继承父类构造函数的属性，没有继承父类原型的属性
  2. 无法实现构造函数的复用（每次用每次都要重新调用）
  3. 每个新实例都有父类构造函数的副本，臃肿

2. 原型继承

/*
* 原型继承
*/
function Child(name){
  this.name = name
}

for(var i in Parent.prototype){
  Child.prototype[i] = Parent.prototype[i];  // 重点
}

let c = new Child('xiaoming')
c.show()   // 报错，父构造函数无法继承
console.log(c.age) // 10

• 重点：遍历父类的原型赋值给子类
• 优点：简单，方便，可以继承原型身上的方式和属性
• 缺点：只能继承原型，不方便传参

3. 原型链继承

/*
* 原型链继承
*/
function Child(name){
  //无法向父类传参name
  this.name = name
}

Child.prototype = new Parent() //重点

let c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // 10

• 重点：让新实例的原型等于父类的实例
• 特点：
  既能继承原型，又能继承构造函数
• 缺点：
  1. 新实例无法向父类构造函数传参
  2. 继承单一，无法多继承
  3. 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

4. 组合继承

组合继承（组合原型链继承和构造函数继承）（常用）

/*
* 组合继承
*/
function Child(name){
  Parent.apply(this, arguments) //重点
}

Child.prototype = new Parent() //重点

let c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // 10

• 重点：结合了两种模式的优点，传参和复用
• 特点：
  1. 既能继承构造函数又能继承原型，方便传参，多继承
  2. 每个新实例引入的构造函数属性是私有的
• 缺点：
  调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

5. 寄生继承(Object.create()的原理)

/*
* 寄生继承（Object.create()的原理）
*/
function createChild(obj){
  function F(){}
  F.prototype = obj
  return new F()   // 返回一个实例，实例的原型是传入的obj
}

function create(obj, name){
  let child = createChild(obj)  // 重点
  child.name = name
  return child
}

let p = new Parent()  // 获取一个Parent实例
let child = create(p, 'xiaoming')

console.log(child.name) // xiaoming
console.log(child.age) // 10 通过原型找到

• 重点：就是给原型链继承外面套了个壳子
• 优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象
• 缺点：没用到原型，无法复用

6. ES6 class继承

extends 使用关键字继承
super 调用父类构造函数

• 特点：
  ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。如果子类没有定义constructor方法，这个方法会被默认添加。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。
• 注意：
  在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。
• 优点：简单方便易操作，语法层面的继承，属性和方法都能继承，参数很好处理
• 缺点：兼容性