打字稿：从扩展类调用超级方法给出类型错误 - （中间值）不是函数

Question

我正在一个名为 StructureWindowComponent 的组件中实现事件处理，并且还在 LeggerStructureWindowComponent 中对其进行了覆盖。在基类（StructureWindowComponent）中，blur事件的事件处理如下：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);   }我在控制台中收到错误：ERROR TypeError: (intermediate value).symbolCellLostFocus is not a function不知道这里出了什么问题..有人可以请教吗？

Answer 1

这是一个棘手的问题，但它与类中箭头函数语法的使用以及原型链有关。它与 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();

        };

    }

}

如您所见，方法是在构造函数中为构造函数创建的每个实例定义的。这意味着方法sayHellofromA不适用于B，因为在（即）sayHello的原型中不可用，它仅适用于 的每个实例。这可能会令人困惑，我强烈建议学习 JavaScript 中的原型继承！BAA

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

不管怎样，当你super.X()在这里写的时候，JavaScript 引擎试图访问X原型上的方法，它不存在。你最终得到Object.getPrototypeOf(this).undefined(), 并且undefined确实不是一个函数，所以你会得到一个TypeError: (intermediate value).sayHello is not a function运行时错误。