TypeScriptのsetInterval動作

Question

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

まず活字体コード：

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

だから、このラインは500msごとtimerTokenの値を設定し、現在の日付/時刻を持つHTML要素を更新します。

これに相当しますJavaScriptで

：

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

だから私は、活字体のコード行のラムダ式について疑問に思ったし、それを削除したが、その後日付/時刻文字列はもう更新されません。

簡単な質問...なぜですか？

Answer 1

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

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

() =>タイプスクリプトはレキシカルスコープを保持しています...つまり、thisは、式の内部と同じ意味を表現することを意味します。コンパイルされたJavaScriptでは、それを行うために変数_thisが作成されていることがわかります。

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

この基本テストを使用して、withFatArrowまたはwithoutFatArrowを呼び出すと、違いがどのようになるかを見ることができます。

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();