Javascript Child Class 方法未覆盖 Parent Class 方法

Question

我正在尝试覆盖 parent class 中的一种方法，但存在一些问题。

下面是我正在尝试的场景的代码片段。

class Parent {
add = () => {
      console.log('Parent method');
}
}
class Child extends Parent {
add () {
console.log('Child Method');
 }
}
// Creating an instance
const child = new Child();
child.add();

它正在调用 Parent 方法添加，因为这是箭头函数，有人可以解释为什么会这样。如果我使 parent 函数成为一个简单的 javascript 方法，那么 child 就可以覆盖。

其他详细信息：

我无法访问 Parent，因为它是图书馆的一部分。
我无法将 child class 方法作为实例属性（箭头函数） , 存在的原因还有为 child（child of child）编写的规范，如果我们使用箭头我们将无法调用超级函数。
Child函数名无法重命名。

Answer 1

父 add 是一个实例属性，它掩盖了子 class 方法，后者是实例原型的一部分。这有点hack，但是你可以在构造函数中重命名和删除class 属性：

class Parent {
  add = () => {
    console.log('Parent method');
  }
}
class Child extends Parent {
  constructor() {
    super();
    this.parentAdd = this.add;
    delete this.add;
  }

  add() {
    console.log('Child Method');
    this.parentAdd(); // if you need call the parent's method
  }
}

const child = new Child();
child.add();

Answer 2

这是。它们限制了扩展和测试 class 的方式。

Class fields（箭头方法是）是构造函数代码的语法糖：

class Parent {
  constructor() {
    this.add = () => {...};
  }
}

只有另一个箭头方法可以覆盖父箭头方法，因为它们是在 class 构造函数中定义的，而不是在 class 原型中定义的：

class Child extends Parent {
  add = () => {
    /* no super.add here because add is not prototype method */
  }
}

如果打算使用 super.add，解决方法是存储父方法：

class Child extends Parent {
  superAdd = this.add;
  add = () => {
    this.superAdd();
  }
}

请注意，由于这是构造函数代码的语法糖，因此 superAdd 和 add 的定义顺序很重要。

Javascript Child Class 方法未覆盖 Parent Class 方法

Javascript Child Class method not overriding Parent Class Method

javascript

ecmascript-5

ecmascript-6