继承的几种方式

512 阅读2分钟

本人就个人理解所写的几种继承方式,若有错误,欢迎指正:

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() // '跑啊跑'

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