ChuChencheng / note

菜鸡零碎知识笔记
Creative Commons Zero v1.0 Universal
3 stars 0 forks source link

JavaScript 利用原型实现继承 #13

Open ChuChencheng opened 4 years ago

ChuChencheng commented 4 years ago

背景

利用寄生组合继承

不说花里胡哨的,直接手写代码

实现

假设给定一个父类 SuperClass ,实现一个继承它的子类 SubClass

// 给定的父类
function SuperClass () {
  this.superProperty = 1
}

SuperClass.prototype.superMethod = function () {
  console.log('super method')
}

// 实现继承的子类
function inheritPrototype (superClass, subClass) {
  const tempInstance = Object.create(superClass.prototype)
  // 不打破原型链,在 temp 实例上挂一个 constructor
  tempInstance.constructor = subClass
  subClass.prototype = tempInstance
}

function SubClass (...rest) {
  // 继承构造函数创建的属性
  SuperClass.call(this, ...rest)
  this.subProperty = 2
}

// 继承原型上的方法
inheritPrototype(SuperClass, SubClass)

// 在子类原型上可继续添加新方法
SubClass.prototype.subMethod = function () {
  console.log('sub method')
}

hint

inheritPrototype 方法中, temp 对象的原型链:

temp.constructor === SubClass // true
temp.__proto__.contructor === SuperClass // true

参考

回忆杀:JavaScript的继承