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

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 中的原型继承！BAAES2015 中引入的类只是 JavaScript 中原型继承的语法糖。class, constructor,等关键字super只抽象了编写原型链所需的语法。本质上，它是在 JavaScript 中实现组合和继承的方式，一个非常强大的概念。不管怎样，当你super.X()在这里写的时候，JavaScript 引擎试图访问X原型上的方法，它不存在。你最终得到Object.getPrototypeOf(this).undefined(), 并且undefined确实不是一个函数，所以你会得到一个TypeError: (intermediate value).sayHello is not a function运行时错误。