原型继承和 Class 继承

HaoOuBa
2021-06-23 / 3 评论 / 372 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月01日,已超过515天没有更新,若内容或图片失效,请留言反馈。

⾸先先来讲下 class ,其实在 JS 中并不存在类, class 只是语法糖,本质还是函数

class Person {}
Person instanceof Function // true

组合继承

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
   console.log(this.val)
}

function Child(value) {
   Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

寄⽣组合继承

这种继承⽅式对组合继承进⾏了优化,组合继承缺点在于继承⽗类函数时调⽤了构造函数,我们只需要优化掉这点就⾏了
function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}
function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class继承

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
15

评论 (3)

取消
  1. 头像
    叠被
    Android · Google Chrome

    画图

    回复
  2. 头像
    123
    MacOS · Google Chrome

    asdfasdf

    回复
  3. 头像
    11
    Windows 10 · QQ Browser

    画图

    回复