繼承的幾種方式

本人就我的理解所寫的幾種繼承方式，如有錯誤，歡迎指正：

1.類式繼承

function Animal(){
  this.name='dog'
  this.age = 18
}
// 將run方法掛載在Animal的原型上

Animal.prototype.run= function() { 
  console.log('跑啊跑')
}
// 聲明一個子函數
function son(){
  this.color="black"
}
// 若是son想要繼承Animal
son.prototype = new Animal()
var p1 = new son()
console.log(p1.name) // dog
複製代碼

可是，在使用上述方法繼承的時候存在一個弊端，弊端以下

function Animal(){
  this.name='dog'
  this.age = 18
  this.type= ['pig','dog']
}
// 將run方法掛載在Animal的原型上
Animal.prototype.run= function() { 
  console.log('跑啊跑')
}
// 聲明一個子函數
function son(){
  this.color="black"
}
// 若是son想要繼承Animal
son.prototype = new Animal()
var p1 = new son()
p1.type.push('wangcai')
console.log(p1.type) // ["pig", "dog", "wangcai"]
var p2 = new son()
console.log(p2.type) // ["pig", "dog", "wangcai"]
複製代碼

咱們在改變實例化p1對應的type時，一樣的咱們也修改了實例p2對應的type，這樣就存在了弊端

2.使用構造函數的方式繼承

// 構造函數的繼承方式
function Animal(color){
  this.name='dog'
  this.color = color
  this.type= ['pig','dog']
}
// 將run方法掛載在Animal的原型上
Animal.prototype.run= function() { 
  console.log('跑啊跑')
}
//  聲明一個子方法
function son(color){
  Animal.apply(this,arguments)
}
var p1 = new son('black')
p1.type.push('duck')
console.log(p1.color) // black
console.log(p1.type) //  ["pig", "dog", "duck"]
var p2 = new son('white')
console.log(p2.color) // white
console.log(p2.type)  //  ["pig", "dog"]
複製代碼

可是使用以上方法存在一個缺陷，咱們沒法訪問父元素的公共方法

p2.run() // menu.html:90 Uncaught TypeError: p2.run is not a function
複製代碼

構造函數的繼承方式至關於改變了this的指向

3.混合式繼承

混合式繼承就是把類式繼承與構造函數繼承混合起來

function Animal(color){
  this.name='dog'
  this.color = color
  this.type= ['pig','dog']
}
// 將run方法掛載在Animal的原型上
Animal.prototype.run= function() { 
  console.log('跑啊跑')
}
//  聲明一個子方法
function son(color){
  Animal.apply(this,arguments)
}
// 類式繼承
son.prototype = new Animal('red')
// 聲明一個子對象的實例
var p1 = new son('black')
p1.type.push('duck')
console.log(p1.color) // black
console.log(p1.type) //  ["pig", "dog", "duck"]
var p2 = new son('white')
console.log(p2.color) // white
console.log(p2.type)  //  ["pig", "dog"]
p2.run() // '跑啊跑'
複製代碼

採用混合式繼承就改變了已上兩種繼承方式的弊端