繼承的幾種實現方式

1. 原型鏈繼承（子函數的原型指向構造函數的實例）

function F() {
  this.name = '1'
  this.arr = [1, 2, 3]
}
F.prototype.say = function () {
  console.log('hello')
}
function Son() {}
Son.prototype = new F()
let son1 = new Son()
let son2 = new Son()
son1.name = '333'
son1.arr.push(4)
console.log(son1.name) // 333
console.log(son2.name) // 1
console.log('-----------')
console.log(son1.arr) // [1,2,3,4]
console.log(son2.arr) // [1,2,3,4]
複製代碼

缺點： 對於引用類型的數據存在空間共享的問題

2. 構造函數繼承（子函數修改構造函數的this指向）

function F(){
  this.name='1'
  this.arr=[1,2,3]
}
F.prototype.say=function(){
  console.log('hello')
}
function Son(){
  F.call(this)
}
let son1 = new Son()
let son2 = new Son()
son1.name = '333'
son1.arr.push(4)
console.log(son1.name) // 333
console.log(son2.name) // 1
console.log('-----------')
console.log(son1.arr) // [1,2,3,4]
console.log(son2.arr) // [1,2,3]
son1.say() // son1.say is not a function
複製代碼

缺點： 沒法繼承原型上的方法

3. 組合繼承

function F(){
  this.name='1'
  this.arr=[1,2,3]
}
F.prototype.say = function (){
  console.log('hello')
}
function Son(){
  F.call(this)
}
Son.prototype= new F()
Son.prototype.constructor = Son // 構造器指回Son
let son1 = new Son()
let son2 = new Son()
son1.name = '333'
son1.arr.push(4)
console.log(son1.name) // 333
console.log(son2.name) // 1
console.log('-----------')
console.log(son1.arr) // [1,2,3,4]
console.log(son2.arr) // [1,2,3]
son1.say() // hello
複製代碼

缺點： new F() 與F.call(this)會重複執行，性能上存在缺陷

4.寄生繼承

function F(){
  this.name='1'
  this.arr=[1,2,3]
}
F.prototype.say = function (){
  console.log('hello')
}
function Son(){
  F.call(this)
}
Son.prototype= Object.create(F.prototype) // <<<此處是優化點
Son.prototype.constructor = Son // 構造器指回Son
let son1 = new Son()
let son2 = new Son()
son1.name = '333'
son1.arr.push(4)
console.log(son1.name) // 333
console.log(son2.name) // 1
console.log('-----------')
console.log(son1.arr) // [1,2,3,4]
console.log(son2.arr) // [1,2,3]
son1.say() // hello
複製代碼

5. class 繼承

class F{
  constructor(name){
    this.name=name
  }
  say(){
    console.log('hello')
  }
}
class Son extends F{
  constructor(name,age){
    super(name);
    this.age=age
  }
  sonSay(){
    console.log('son say,name:',this.name,'age:', this.age)
  }
}
let son1=new Son('zhansan', 18)
let son2=new Son('lisi', 22)
console.log(son1.name)
console.log(son1.age)
console.log(son2.name)
console.log(son2.age)
son1.sonSay()
son2.sonSay()
複製代碼