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

【问题标题】：How to bind this to a function for AngularIO's Observable::subscribe?如何将此绑定到 AngularIO 的 Observable::subscribe 的函数？
【发布时间】：2017-06-16 08:50:36
【问题描述】：

有很多使用来自 AngularIO 的 Observable.subscribe() 函数的例子。无论如何，我只能在里面看到匿名函数：

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

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

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

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

【问题讨论】：

标签： javascript angular typescript this subscribe

【解决方案1】：

您可以将其包装在 arrow function 中，这将捕获正确的 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

【讨论】：

您还可以使用 Function.call: private subscribeBar(onDataChanged: (myData: any) => void): void { bar().subscribe((myData) => onDataChanged.call(this, myData)); } 将杂乱的细节隐藏在辅助函数中，您可以这样调用：this.subscribeBar(this.updateData); 如果您还需要传递额外的参数或保存订阅以在以后取消订阅，并能够在您的单元测试中正确断言。

【解决方案2】：

这与 胖箭头 行为有关。

你可以find more here（在“这个和胖箭头”话题，大约一半的页面）

【讨论】：