33

タイプスクリプトでは、次のように書くことができます。

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

コンパイルされると、TypeScriptは、これが囲まれた関数ではなく、私のクラスを指していることを自動的に確認します。

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

の字句スコープを保持したくないので、これを行うにはfat-arrow構文を避ける必要がありますthis。

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

この例では、TypeScriptで生成された変数との衝突を回避するの_meではなく、を使用しました。との混乱を避けるために、_this私も避けました（RockResolveに感謝します）。selfwindow.self

なぜ！

ECMAScript 6仕様は、Arrow関数定義を特徴としています。これは、TypeScript言語がこの機能を採用した場所です。TypeScriptが将来ECMAScript6をターゲットにする場合、構文はそのままになります。そのため、将来の互換性を損なうことなく() =>、の両方のコンテキストで機能させることはできません。this

TypeScriptコンパイラを変更してECMAScript3または5で両方_thisを使用できるようにする方法を想像できたとしても、実際にはバージョン6で問題になります。this

于 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

ラムダを使用しない別のソリューションを提供しましょう。メインのthisをプロパティとしてアタッチできます（この例ではmeと呼ばれます）。

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 に答える