如何在Angular2 TypeScript中正确执行“绑定”操作？

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)。

但在 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函数，有什么方法可以解决问题？

- Rolando

Answer 1

在TypeScript和ES6中，绑定函数的最方便的方法是使用箭头函数，它可以保存上下文：

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

或者像这样使用bind：

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

您可以像这样使用TS实例箭头函数（ES类属性）：

或者您可以像这样使用TS实例箭头函数（ES类属性）：

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

类属性是第2阶段ES7提案，在TS中得到支持。

请查看文档以了解一些方法之间的比较。

- courses.indepth.dev

---

请参阅 https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript#fixes。 - yurzui

@yurzui，谢谢，这些也是我提到的三种方法。我已经在答案中放入了参考资料。 - Max Koretskyi

如何获取对this.mystr的引用？它会被定义还是未定义？ - Rolando

@Rolando，this将指向类实例，因此您将可以访问所有class成员，包括mystr。 - Max Koretskyi