20

TypeScript をいじり始めたところです。Visual Studio 2012 Express for Web でサンプル プロジェクトを作成しましたが、このサンプルには、自分では説明できない動作をするコード行が含まれています。

最初に TypeScript コード:

start() {
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}

したがって、この行は 500 ミリ秒ごとに timerToken の値を設定し、現在の日付/時刻で HTML 要素を更新します。

JavaScript では、これは次のようになります。

Greeter.prototype.start = function () {
        this.timerToken = setInterval(this.span.innerHTML = new Date().toUTCString(), 500);
    };

そのため、TypeScript コード行のラムダ式について疑問に思って削除しましたが、日付/時刻文字列は更新されなくなりました。

とても簡単な質問...なぜですか？

4

1 に答える 1

34

spanメソッドと同じクラスのプロパティであると想定していstartます...これについて間違っている場合は修正してください。

したがって、太い矢の構文は、TypeScript では特別な意味を持ちます。

TypeScriptを使用すると() =>、レキシカル スコープが保持されます。これthisは、式の外側と同じように、式の内側でも同じことを意味します。コンパイルされた JavaScript を見ると、そのために名前が付けられた変数が作成されていることがわかります_this。

したがって、太い矢印の構文でthis.spanは、クラスの span という名前のプロパティです。太い矢の構文がない場合this.spanは未定義です。

この基本的なテストを使用してwithFatArroworwithoutFatArrowを呼び出して違いを確認すると、何が起こるかがわかります。

class Test {
    public example = 'Test';
    private timer;

    withFatArrow() {
        this.timer = setTimeout(() => alert(this.example), 500);
    }

    withoutFatArrow() {
        this.timer = setTimeout(function() { alert(this.example) }, 500);
    }
}

var test = new Test();
//test.withFatArrow();
test.withoutFatArrow();
于 2013-04-18T08:35:44.387 に答える