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

Question

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

下面是我正在尝试的场景的代码 sn-p。

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();

它正在调用父方法添加，因为那是箭头函数，有人可以解释为什么会发生这种情况。如果我将父函数设为简单的 javascript 方法，则子函数可以覆盖。

其他详情：

1. 我无权访问 Parent，因为它是图书馆的一部分。
2. 我无法将我的子类方法设为实例属性（箭头函数） , 有进一步的原因 为孩子（孩子的孩子）编写的规范，如果我们使用箭头 我们将无法调用超级函数。
3. 无法重命名子函数名称。

Answer 1

这是one of few reasons why arrow methods aren't convenient。它们限制了类可以扩展和测试的方式。

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

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

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

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 是一个实例属性，它掩盖了作为实例原型一部分的子类方法。有点hack，但是可以在构造函数中重命名和删除类属性：

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();