javascript - typescript :从扩展类调用 super 方法会产生类型错误 - (中间值)不是函数

Question

我在一个名为 StructureWindowComponent 的组件中实现事件处理，并且在 LeggerStructureWindowComponent 中也有一个覆盖它。
在基类(StructureWindowComponent)中，模糊事件的事件处理如下:

symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{
    console.log("base class symbol cell lost focus");
    //implementation...
  }

在派生类 LeggerStructureWindowComponent 中，我正在使用这样的 super 调用此方法...

symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{
    console.log("derived class symbol lost focus");
    super.symbolCellLostFocus(symbolField, $index);
  }

我在控制台中收到错误:
错误类型错误:(中间值).symbolCellLostFocus 不是函数
不知道这里出了什么问题..有人可以请教吗？

Answer 1

这是一个棘手的问题，但它与在类中使用箭头函数语法和原型(prototype)链有关。它与 Angular 无关。
基本上如果你想解决你的问题，你需要更换 a = () => { ... }与 a() { ... } :

symbolCellLostFocus(symbolField : MatInput, $index: number) {
  console.log("base class symbol cell lost focus");
  //implementation...
}

symbolCellLostFocus(symbolField : MatInput, $index: number) {
  console.log("derived class symbol lost focus");
  super.symbolCellLostFocus(symbolField, $index);
}

现在进行解释，如果您编写以下代码段:

class A {
    name = 'A'
    sayHello = () => {
        console.log('Hello from A')
    }
}

class B extends A {
    name = 'B'
    sayHello = () => {
        console.log('Hello from B')
        super.sayHello()
    }
}

它被转换成这个 JavaScript 片段:

class A {
    constructor() {
        this.name = 'A';
        this.sayHello = () => {
            console.log('Hello from A');
        };
    }
}
class B extends A {
    constructor() {
        super(...arguments);
        this.name = 'B';
        this.sayHello = () => {
            console.log('Hello from B');
            super.sayHello();
        };
    }
}

如您所见，方法在构造函数中定义，为 每个实例 由构造函数创建。这意味着方法 sayHello来自 A不适用于 B , 因为 sayHello在 B 的原型(prototype)中不可用(即 A )，它仅适用于 A 的每个实例.这可能会令人困惑，我强烈建议学习 JavaScript 中的原型(prototype)继承!
ES2015 中引入的类只是 JavaScript 中原型(prototype)继承的语法糖。 class , constructor , super等关键字只抽象了编写原型(prototype)链所需的语法。本质上，它是在 JavaScript 中实现组合和继承的方式，这是一个非常强大的概念。
无论如何，当你写 super.X()在这里，JavaScript 引擎试图访问 X原型(prototype)上的方法，它不存在。你最终得到 Object.getPrototypeOf(this).undefined() , 和 undefined确实不是一个函数，所以你得到一个 TypeError: (intermediate value).sayHello is not a function运行时错误。
这是一个例子来说明我所说的: TS playground .