Typescript：从扩展类中调用super方法会产生类型错误-中间值不是函数

如何解决Typescript：从扩展类中调用super方法会产生类型错误-中间值不是函数

我在名为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);
  }

我在控制台中收到错误： 错误TypeError ：（中间值）。symbolCellLostFocus不是函数

不确定这是怎么回事..有人可以请教吗？

解决方法

这是一个棘手的问题，但这与在类中使用箭头函数语法以及原型链有关。它与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的原型{{{1 }}），仅适用于B的每个实例。这可能会造成混淆，我强烈建议您学习JavaScript中的原型继承！

ES2015中引入的类只是JavaScript中原型继承的语法糖。 A，A，class等关键字仅抽象出编写原型链所需的语法。本质上，这是在JavaScript中实现组合和继承的方法，这是一个非常强大的概念。

无论如何，当您在此处编写constructor时，JavaScript引擎正在尝试访问原型上的super方法，该方法不存在。您最终得到super.X()，而X确实不是一个函数，因此会出现Object.getPrototypeOf(this).undefined()运行时错误。

下面是一个示例来说明我说的话：TS playground。