为什么箭头函数不传递参数？

Question

我正在使用 angular w/ rxjs 来观察界面上的用户事件。但是，我在将参数传递给箭头函数中的方法时遇到了这个非常简单的问题。问题是：

这不起作用：searchterm 没有传递给 this.searchFacilities

ngOnInit() {
 this.searchTerm$.subscribe(searchterm => this.searchFacilities);/**Not working here**/
}

searchFacilities(term: string){
  console.log(term);
  this.facilityservice.searchFacilities(term)
    .subscribe(results => this.facilityList = results);
}

但这行得通：

this.searchTerm$.subscribe(searchterm => { this.searchFacilities(searchterm); })

显然，我还有其他非常轻松的解决方案，但我真的很想了解为什么我的第一种方法不起作用。谢谢！

Answer 1

因为您获得了对 searchTerm 的引用，但您没有对它执行任何操作。你可以只做 this.searchTerm$.subscribe(this.searchFacilities) 并且该术语将被传递到函数中。

Answer 2

因为参数没有直接传递给你的函数。

示例来自 the doc：

Rx.Observable.range(0, 3).subscribe(function (x) { console.log(x) });

箭头函数的相同示例：

Rx.Observable.range(0, 3).subscribe(x => console.log(x));

Answer 3

你 searchFacilities 函数在全局范围内声明，然后在 ngOnInit 内部作为回调调用，它的上下文不再是全局范围，现在 this指向ngOnInit元素对象。为了在 ngOnInit 对象内部工作，您需要绑定它，然后 searchFacilities 成为 ngOnInit 的方法，这样它就可以工作了。

Answer 4

小说明。文档说您需要将回调传递给 subscribe() 并且此回调将接收可观察对象发出的值。

我们可以这样写：

const myCallBack = (val) => console.log(val);
Observable.range(0, 3).subscribe(myCallBack);

在你的情况下你已经有一个回调，this.searchFacilities。
这意味着您可以简单地写：

this.searchTerm$.subscribe(this.searchFacilities);

就像你可以将我原来的例子重写为：

// Now `console.log` is the callback!
Observable.range(0, 3).subscribe(console.log);

也就是说，问题不在"Why arrow function is not passing arguments"。问题是你创建了一个箭头函数，它的函数体 IS 你的回调，而不是直接使用你的回调。

您的代码的扩展版本如下所示：

const myCallBack = (searchterm) => {
  return this.searchFacilities;
}

如您所见，searchFacilities 既没有被调用，也没有接收到 searchterm 参数。

您可以通过编写以下代码使运行陷入与 NON-ARROW 函数相同的问题（尽管箭头函数的语法确实使错误更容易和隐蔽）：

const myCallBack = function(searchterm) {
  return this.searchFacilities;
}

为什么箭头函数不传递参数？

Why arrow function is not passing arguments?

javascript

rxjs

ecmascript-6

arrow-functions