JS中继承的几种实现方式

继承的核心就是将父类的原型(prototype)赋值给子类，同时将构造函数(constructor)指回子类，既保证了不会有多余的父类属性，又保证子类能找到自身的构造函数。

1.原型链的继承

function Father(){
  this.firstName = 'wang',
  this.action = function(){
    console.info('super')
  }
}
Father.prototype.sayHi = function(){
  console.info('hi')
}
// 子类的原型指向父类的原型
Son.prototype = Father.prototype
Son.prototype.constructor = Son // 需要手动将constructor指回来，不然构造函数指向父类
// 子类只能继承父类原型上的属性和方法，不能继承父类本身的属性
let s = new Son()
s.sayHi() // hi
console.info(s.firstName) //获取不到父类自身的属性，undefined
console.info(s.action) //获取不到父类自身的属性，undefined

弊端：需要手动改回constructor，不能继承父类自身属性

 

基于原型的继承还有一种实现：

function Father(){
  this.data = [1]
  this.firstName = 'wang',
  this.action = function(){
    console.info('super')
  }
}
Father.prototype.sayHi = function(){
  console.info('hi')
}
function SonOther(){
}
SonOther.prototype = new Father()
SonOther.prototype.constructor = SonOther
let so1 = new SonOther()
let so2 = new SonOther()
// 能继承父类自身的属性
console.info(so1.firstName) // wang
so2.sayHi()  // hi
// 但是数据是共享的
so1.data.push(2)
console.info(so2.data) // [1, 2] 

弊端：需要手动改回constructor,子类对象属性共享

2.借助构造函数继承

function Son(){
  Father.call(this) // Father.apply(this)
}
 
let s = new Son()
let s2 = new Son()
console.info(s.data.push(2))
console.info(s.data, s2.data) // [ 1, 2 ] [ 1 ] 不会共享数据
console.info(s.sayHi) // 不能继承父类原型中的方法 

弊端：只能继承父类自身的属性

3.组合式继承   构造函数+原型链

function Son(){
  Father.call(this) // Father.apply(this)
}
 
Son.prototype = new Father() 

优点：能继承父类自身及原型链上的方法

弊端：调用了两次父类的构造函数，造成内存浪费

4.寄生式继承

通过一个函数在内部给对象添加属性和方法

let father = {
  name: 'f',
  age: 30
}
 
function createObj(original){
  let obj = Object.create(original)
  obj.sayHi = function(){
    console.info('hi')
  }
  return obj
}
 
let s = createObj(father)
console.info(s.name)
s.sayHi()
 

弊端：子类对象共享属性

5.寄生组合继承

function inheritPrototype(subType, superType){
  let prototype = Object.create(subType.prototype)
  subType.prototype = prototype
  subType.prototype.constructor = subType
}
 
function Son(){
  Father.call(this)
}
inheritPrototype(Son, Father)
 
let son = new Son()
console.info(son)

6.类的继承

要点：使用extends指明父类，构造函数中写super

class Parent {
  constructor(){
    this.name = 'f'
  }
  sayHi(){
    console.info('hi')
  }
}
 
class Child extends Parent {
  constructor(value){
    super(value)
    this.val = value
  }
}
 
let child = new Child('899.5')
console.info(child.name, child.val) // f 899.5
child.sayHi() // hi