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