如何将此绑定到AngularIO的Observable :: subscribe函数中？

Question

有很多使用AngularIO中的Observable.subscribe()函数的例子。然而，我只能看到其中的匿名函数：

bar().subscribe(data => this.data = data, ...);

如果我尝试像这样提交同一类别的函数：

updateData(myData : DataType[]) {
   this.data = data;
}
...
bar().subscribe(this.updateData, ...);

那么第2行中的this对象不再引用当前对象。这可能是我不理解的一些JavaScript逻辑。我知道您可以将对象绑定到函数中，这是我需要做的吗？这是最佳实践吗？通常如何解决此问题（我想避免在subscribe()内使用大型匿名函数）。

- user2084865

Answer 1

您可以将其放置在箭头函数中，该函数将捕获正确的this：

bar().subscribe((myData) => this.updateData(myData), ...);

或者使用Function.bind方法，它也会绑定正确的上下文:

bar().subscribe(this.updateData.bind(this), ...);

但请注意，Function.bind 返回的是 any 类型，这会导致在 TypeScript 中失去类型检查。请参见https://github.com/Microsoft/TypeScript/issues/212

- Saravana

---

你还可以使用Function.call将混乱的细节隐藏在一个辅助函数中：private subscribeBar(onDataChanged: (myData: any) => void): void { bar().subscribe((myData) => onDataChanged.call(this, myData)); }你可以像这样调用它：this.subscribeBar(this.updateData);如果你还需要传递额外的参数或保存订阅以便在以后取消订阅，以及在单元测试中进行适当的断言，这将特别有用。 - EriF89

Answer 2

这与fat arrow的行为有关。

您可以在“this and fat arrow”主题中找到更多信息（大约在页面的一半处）。

- user4676340