TypeScript中的setInterval行爲

Question

我剛開始玩弄TypeScript。我用Visual Studio 2012 Express for Web創建了一個示例項目，此示例中有一行代碼，其行爲我無法解釋。

首先打字稿代碼：

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

所以這條線設置timerToken的值每500ms並更新與當前日期/時間一個HTML元素。

在JavaScript中，這將是相同的：

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

所以我想知道在打字稿代碼行lambda表達式，並刪除它，但隨後的日期/時間線將不再更新。

這麼容易的問題......爲什麼？

Answer 1

我假設span是與start方法在同一類中的屬性...糾正我，如果我在這方面是錯誤的。

所以fat-arrow語法在TypeScript中有特殊的含義。

當您使用() => 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();