JavaScript 从非 ES6 class 覆盖到 ES6 class

Question

在我的 Webapp 中，我需要实现一个 API，它不包含任何 ES6 class 定义，但我想扩展其中一个 classes 并覆盖一些方法。覆盖无法正常工作...

function A() {
  this.msg = function() {
    console.log("A");
  }
}

class B {
  constructor() {
    A.call(this);
  }

  msg() {
    console.log("B");
  }
}

new B().msg();

我希望结果是 "B"，但是 "class" A 的方法被执行了。

Answer 1

问题是在 A 中，msg 函数附加到构造函数 this 中 - 即 msg 属性 直接附加到实例对象本身，而不是原型。相比之下，B的msg在B的原型上——也就是B.prototype，实例的对象继承自.

一个选择是在 B 的构造函数中覆盖 msg：

function A() {
  this.msg = function() {
    console.log("A");
  }
}

class B {
  constructor() {
    A.call(this);
    this.msg = () => {
      console.log('b');
    }
  }
}

new B().msg();

更好看的原型解决方案是 B 扩展 A，如果这是您可以进行的可能修改：

function A() {
  // empty constructor
}
A.prototype.msg = function() {
  console.log("A");
}

class B extends A {
  msg() {
    console.log('b');
  }
}

new B().msg();

（有了这个，内部原型链看起来像：A.prototype -> B.prototype -> instance，所以从实例来看，B.prototype.msg 优先于 A.prototype.msg）

JavaScript 从非 ES6 class 覆盖到 ES6 class

JavaScript override from a non ES6 class to an ES6 class

javascript

es6-class