继承的几种方式

本人就我的理解所写的几种继承方式，如有错误，欢迎指正：

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() // '跑啊跑'
复制代码

采用混合式继承就改变了已上两种继承方式的弊端