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

在TypeScript和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进行方法之间的比较。

如何正确地做一个＆＃34; bind＆＃34;在angular2打字稿？

1 个答案: