(functionName) 不是子类中的函数答案

【问题标题】：(functionName) is not a function in subclass(functionName) 不是子类中的函数
【发布时间】：2023-04-09 08:50:01
【问题描述】：

我正在为基于 Web 的文本编辑器编写扩展程序。由于类层次结构，我的代码给出了一些奇怪的结果。

我尝试将“验证”函数移至基类，但无济于事

class BaseClass{
    close(): void {
        // Does some stuff
    }
    save(): void {
        // Also does things
    }
}
class SubClass extends BaseClass{
    close(): void {
        this.validate(() => super.close()) // This works as expected
    }
    save(): void {
        this.validate(() => super.save()) // This throws the error: Uncaught TypeError: this.validate is not a function
    }
    validate(callback: () => void){
        // Does some validation, then
        if (validationOk) callback()
    }
}

预期的结果是子类中的保存和关闭函数都调用了验证函数而没有错误。

【问题讨论】：

你的代码没有编译？
SubClass 与 BaseClass 没有关系...是什么让你认为它是一个子类。
代码确实可以编译，但是在浏览器中运行时会在控制台中出现错误。对于类之间的关系：我忘记在我的示例中输入 extends 语句。它在实际代码中
那么为什么会在控制台中打印“base save”呢？ codesandbox.io/s/…这里发生了其他事情。
TypeScript "this" scoping issue when called in jquery callback的可能重复

标签： typescript class hierarchy

【解决方案1】：

原来事件初始化错误。

我已经替换了以下内容：

this.saveButton.addEventListener('click', this.save);

与：

this.saveButton.addEventListener('click', () => this.save());

在添加 validate 函数之前它起作用的唯一原因是 BaseClass.save 函数中没有对“this”的引用。

【讨论】：