33

在打字稿中，我可以这样写：

$('#something').fadeOut(400, (): void => {
    this.invokeAnotherMethod();
});

编译后，TypeScript 会自动确保 this 指向我的类而不是封闭的函数：

var _this = this;
$('#something').fadeOut(400, function() {
    _this.invokeAnotherMethod();
});

但是，当我需要访问真实的 this 而不是外部的 _this 时呢？是否有语法来引用它？例如，我如何编写可以编译为以下内容的代码：

var _this = this;
$('#something').fadeOut(400, function() {
    $(this).data('specialhide', true);
    _this.invokeAnotherMethod();
});

可能吗？

4

3 回答 3

28

您需要避免使用粗箭头语法来执行此操作，因为您不想保留this.

var _me = this;
$('#something').fadeOut(400, function () {
    _me.invokeAnotherMethod();
    $(this).data('specialhide', true);
});

在此示例中，我使用_me而不是_this避免与 TypeScript 生成的变量发生任何冲突。我也避免了self，以避免与window.self（感谢 RockResolve）混淆。

为什么！

ECMAScript 6 规范具有箭头函数定义 - 这是 TypeScript 语言从这里获得此功能的地方。当 TypeScript 将来以 ECMAScript 6 为目标时，它将保留在语法中 - 因此它们无法在不破坏未来兼容性() =>的情况下使其同时适用于两种上下文。this

即使您可以想象他们如何更改 TypeScript 编译器以使其在 ECMAScript 3 或 5 中都_this可用this，但它实际上会在版本 6 中成为一个问题。

于 2012-12-18T13:38:52.717 回答
2

我想出了一个出路，如我在回答中所述： 如何使用回调函数在 TypeScript 中保留词法范围

这是实现史蒂夫芬顿在回答中所做的关闭的更好方法。我更喜欢它，因为方法签名记录了用法。

基本上，使用这样的方法：

fadeOutLambda(outerThis: YourClass): {(d: number, i: number): number}{
    return function(d: number, i: number){
        // Put your "fadeOut" logic here
        // refer to "this" to mean the dynamically scoped "this"
        // refer to "outerThis" to refer to the class instance
        alert(outerThis); // lexically scoped class instance
        alert(this); // dynamically scoped context caller
        return 999;
    }
}
于 2014-03-21T21:11:43.657 回答
0

让我提供另一个不使用 lambda 的解决方案。您可以将主 this 作为属性附加（在此示例中称为我）。

class MyClass
{
    constructor()
    {
        var button: HTMLElement = document.getElementById("buttonID");
        (button as any).me = this;
        button.onclick = this.buttonClick;
    }

    private buttonClick(e): boolean
    {
        var me: MyClass = (this as any).me;

        // Implementation using this (the button) and me (the class)

        return false;
    }
}
于 2017-12-31T04:50:05.067 回答