javascript - 如何在 angular2 typescript 中正确执行 "bind"？

Question

我想使用一个 javascript 库，它需要像这样创建一个对象并绑定(bind)到它:

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)

虽然在 typescript 中我想这样做:

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) 之外还有其他选择吗？或者任何适用于 typescript 功能的东西？

Answer 1

在 TypeScript 和 ES6 中，绑定(bind)函数最方便的方法是使用 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用于方法之间的一些比较。