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

【问题标题】：Why arrow function is not passing arguments?为什么箭头函数不传递参数？
【发布时间】：2017-02-14 17:24:29
【问题描述】：

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

这不起作用：搜索项未传递给 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); })

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

【问题讨论】：

searchterm => this.searchFacilities == function(searchterm) { return this.searchFacilities } 为什么要调用this.searchFacilities(searchterm)？ O.o
只做this.searchTerm$.subscribe(this.searchFacilities); 你在引用时把箭头放在外面！
我真的怀疑最后一个 sn-p 是否有效
@Bergi - 你说得对，我正在订阅另一个主题，它也调用了这个方法......我在测试中搞混了。谢谢！
@adeneo - 这实际上更干净，一旦我停下来想一想，它就很有意义。+1

标签： javascript ecmascript-6 rxjs arrow-functions

【解决方案1】：

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

来自the doc的示例：

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

带有箭头函数的相同示例：

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

【讨论】：

知道了，我认为它确实将参数直接传递给我的函数。谢谢
“因为参数没有直接传递给你的函数。” 你这是什么意思？ OPs 代码的问题是他们没有调用this.searchFacilities。
+1 对菲利克斯的评论。 GG 的回答（以及 calbear 的问题）听起来好像问题是箭头函数没有传递参数。但真正的问题更多的是原始代码中的逻辑错误，导致this.searchFacilities 未被调用。更紧凑的解决方案是写this.searchTerm$.subscribe(this.searchFacilities);，其中没有箭头函数的痕迹。详情见我的回答。

【解决方案2】：

小澄清。文档说您需要将回调传递给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);

换句话说，问题不在于“为什么箭头函数不传递参数”。问题是您创建了一个箭头函数，其主体 IS 您的回调，而不是直接使用您的回调。

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

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

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

通过编写以下代码，您可能会遇到与非箭头函数相同的问题（尽管箭头函数的语法确实使错误更有可能和更隐蔽）：

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

【讨论】：

很高兴您提交了这个答案。我真的很想了解发生了什么，并且我相信这个答案涵盖了所有方面......真正陷入的是同样的问题可以使用 ES5 函数语法创建。最初，我有一种错误的印象，即当正文中仅引用一个函数时，箭头函数会自动传递参数....这是不正确的。但现在我也明白 subscribe 只是在寻找我在this.searchFacilities 中已经拥有的回调。
嘿卡尔贝尔。感谢您的反馈。说实话，我不确定我是否应该对已经回答的问题提交答案，但因为 S.O.是关于分享知识和推广最佳实践，我做到了。 :) 关于箭头函数的主体，您需要记住两件事：1) this 关键字不像 ES5 函数那样绑定到函数本身； 2）当主体只包含一个指令/表达式时，你可以省略{ ... }，你会得到一个隐含的return。就像你说的，没有隐式传递参数。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：