JS 常见的几种继承方法

原型链继承

让构造函数的原型对象等于另一构造函数的实例

function SuperType () {}
SuperType.prototype.sayHello = function () {
  console.log('hello world!')
}
function SubType () {}
SubType.prototype = new SuperType()
let instance = new SubType()
instance.sayHello()
// SubType.prototype 的指向被重置,所以
instance.constructor === SuperType

存在的问题

  • 超类中引用类型值的属性会被所有实例共享

借用构造函数(经典继承)

利用 call 在子类的构造函数中调用超类,并改变超类的 this 指向

function SuperType (name) {
  this.name = name
}
function SubType (name, age) {
  SuperType.call(this, name)
  this.age = age
}
let instance = new SubType('john', 18)

解决了原型链继承存在的问题,但是

  • 方法都定义在超类构造函数里面,每次实例一个对象都会重新定义一个方法,没有复用性

组合继承(伪经典继承)

结合原型继承和经典继承

function SuperType (name) {
  this.name = name
}
SuperType.prototype.sayHello = function () {
  console.log('hello world!')
}
function SubType (name, age) {
  SuperType.call(this, name)
  this.age = age
}
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType;
let instance = new SubType('john', 18)

组合继承完美解决了上述两种继承存在的问题,成为最常用的继承模式

ES6 extends 继承

class SuperType {
  constructor (name) {
    this.name = name
  }
  sayName () {
    console.log(this.name)
  } 
}
class SubType extends SuperType {
  constructor (name) {
    super(name)
  }
}
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1104.html
京ICP备19044523号-1