继承的几种实现方式

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()
复制代码