Javascript子类方法不覆盖父类方法

Question

我正在尝试从父类重写一个方法，但是存在一些问题。

下面是我正在尝试的方案的代码片段。

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方法add，即箭头功能，有人可以解释为什么会这样。 如果我将父函数设为简单的javascript方法，则子函数可以覆盖。

其他详细信息 ：

1. 我无权访问“父母”，因为它是图书馆的一部分。
2. 我不能将我的子类方法用作实例属性（箭头函数），原因是还有针对孩子（孩子的孩子）编写的规范，如果我们使用箭头函数，我们将无法调用父对象。
3. 子函数名称无法重命名。

Answer 1

这是箭头方法不方便的几个原因之一 。 它们限制了类的扩展和测试方式。

类字段 （箭头方法是）是构造函数代码的语法糖：

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

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

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的顺序很重要。

Answer 2

父add是一个实例属性，它使子类的类方法（该类的实例原型的一部分）黯然失色。 这有点hacking，但是您可以在构造函数中重命名和删除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();