关键字“this”的 TypeScript 范围答案

【问题标题】：TypeScript scope of keyword 'this'关键字“this”的 TypeScript 范围
【发布时间】：2022-01-29 01:29:02
【问题描述】：

我对关键字“this”的范围有疑问。

例如代码是：

class Burger {
    
    sleep() {
        // To sleep
    }
    
    pourSauce(sauce: string) {
        // To pour sauce
        this.sleep();
    }
}

class Hesburger extends Burger {
    constructor() {
        super();
    }
    
    private bun: string = 'bunny';
    
    foo(): void {
        this.tmp(this.fat);
    }

    private fat(): void {
        super.pourSauce(this.bun);
    }
    
    private tmp(callBack: () => void): void {
        callBack();
    }
}

我打电话的地方：

Hesburger.foo();

我收到错误：

“bun”未定义

我找到了post，描述了传输函数的解决方案。但对类的属性一无所知。

有人可以建议将'bun'变量的值'bunny'传递给函数fat()，以便进一步传递给函数pourSauce()？ p>

谢谢！

【问题讨论】：

foo 似乎不是静态属性，因此您将在 Hesburger 的实例而不是类上调用 foo。你是这个意思吗？你想打电话给let instance = new Hesburger(); instance.foo();而不是Hesburger.foo()？
假设 Hesburger 实际上是 Hesburger 类的一个实例（否则它甚至不会编译）我想你得到的 exact 错误消息是Cannot read properties of undefined (reading 'bun') ，不是吗？
这些名字太奇怪了。假设您的意思是new Hesburger().foo()，您需要在将this.fat 作为回调传递之前绑定this 上下文，如this.tmp(this.fat.bind(this));，请参阅here。由于语言限制或缺少功能，TypeScript 无法解决您的问题； ms/TS#7968 有一个（旧）功能请求，以严格检查 this 上下文。直到并且除非实现了这样的功能，您只需要小心。我要写这个作为答案吗？还是我错过了什么？

标签： javascript node.js typescript

【解决方案1】：

问题出在下面一行

this.tmp(this.fat);

您将fat 函数作为回调传递给tmp 函数。但是即使您传递this.fat，它始终只是一个函数，它不受特定上下文的约束（即它不再具有定义的this）。您可以通过将函数显式绑定到特定上下文来解决此问题

this.tmp(this.fat.bind(this))

【讨论】：

或者，foo(): void { this.tmp(()=>this.fat()); }
哇！效果惊人。我仍然不确定，上下文中发生了什么。但肯定会为我自己说清楚。非常感谢！