如何在angular2打字稿中正確做一個「綁定」？

Question

我想使用需要創建一個對象，這樣的結合給它的JavaScript庫：

this.mystr = "hello"; 
this.webkitspeech = new webkitSpeechRecognition(); 
this.webkitspeech.onresult = function(evt) { 
    console.log(this.mystr); // this is undefined, even though I do have it defined 
} 

我通常會做一個.bind(this)

儘管在打字稿我想這樣做：

this.mystr = "hello" 
this.webkitspeech = new webkitSpeechRecognition(); 
this.webkitspeech.onresult = onresult; 

onresult(event) {  
    console.log(this.mystr) // this is undefined, even though I do have it defined 
} 

.bind(this)在此示例中不起作用。我如何解決這個問題？有沒有其他方法可以做.bind(this)？或者什麼適用於打字稿功能？

Answer 1

在打字稿以及在ES6綁定功能最方便的方法是使用arrow function它保留了背景：

this.webkitspeech.onresult = ($event) => { this.onresult($event) }; 

或使用bind這樣的：

this.webkitspeech.onresult = this.onresult.bind(this); 

或者你可以像這樣使用TS實例箭頭函數（ES類屬性）：

class MyClass() { 
    onresult = ($event) => {...} 
    ... 
    this.webkitspeech.onresult = onresult; 
} 

類屬性是stage 2 ES7 proposal，它在今天的TS中受支持。

See the documentation用於方法之間的一些比較。