javascript中的多个箭头函数是什么意思？

我一直在阅读一堆react代码，我看到这样的东西，我不明白：

 handleChange = field => e => { e.preventDefault(); /// Do something here } 

Answer 1

这是一个咖喱的function

首先，用两个参数来检查这个函数…

 let add = (x,y) => x + y; add(2,3); //=> 5 

这里又是咖啡的forms…

 let add = x => y => x + y; 

这里是相同的代码¹没有箭头function…

 let add = function (x) { return function (y) { return x + y; }; }; 

---

专注于return

这可能有助于以另一种方式对其进行可视化。 我们知道箭头函数是这样工作的 – 让我们特别关注返回值 。

 let f = someParam => returnValue 

所以我们的add函数返回一个函数 – 我们可以使用圆括号来增加清晰度。 加粗的文本是我们的函数add的返回值

 let add = x => (y => x + y) 

换句话说， add一些数字x返回一个函数

 let x = 2; add (2) // returns (y => 2 + y) 

---

调用curried函数

所以为了使用我们的咖喱function，我们必须调用它有点不同…

 add(2)(3); // returns 5 

这是因为第一个（外部）函数调用返回第二个（内部）函数。 只有在我们调用第二个函数之后，我们才能得到结果。 如果我们将两个呼叫分开，则这一点更为明显。

 let add2 = add(2); // returns function(y) { return 2 + y } add2(3); // returns 5 

---

将我们的新理解应用于您的代码

好的，现在我们明白了这是如何工作的，让我们来看看你的代码

 handleChange = field => e => { e.preventDefault(); /// Do something here } 

我们将首先代表它不使用箭头function…

 handleChange = function(field) { return function(e) { e.preventDefault(); // Do something here // return ... }; }; 

但是，因为箭头函数在词汇上绑定了this ，所以看起来更像这样…

 handleChange = function(field) { return function(e) { e.preventDefault(); // Do something here // return ... }.bind(this); }.bind(this); 

也许现在我们可以看到这个更清楚了。 handleChange函数正在为指定的field创build一个函数。 这是一个方便的React技术，因为您需要在每个input上设置您自己的侦听器，以更新您的应用程序状态。 通过使用handleChange函数，我们可以消除导致为每个字段设置change侦听器的所有重复代码。

酷！

---

¹在这里，我不必在词汇上绑定this因为原来的add函数没有使用任何上下文，所以在这种情况下保留它并不重要。

Answer 2

理解箭头函数的可用语法将使您了解在您提供的示例中“链接”时他们所引入的行为。

当一个箭头函数被写入没有块大括号，有或没有多个参数时， 隐式地返回构成函数体的expression式。 在你的例子中，该expression式是另一个箭头函数。

 No arrow funcs Implicitly return `e=>{…}` Explicitly return `e=>{…}` --------------------------------------------------------------------------------- function (field) { | field => e => { | field => { return function (e) { | | return e => { e.preventDefault() | e.preventDefault() | e.preventDefault() } | | } } | } | } 

使用箭头语法编写匿名函数的另一个优点是，它们在词法上与其定义的范围绑定在一起。 从MDN上的“箭头function”

与函数expression式相比， 箭头函数expression式具有更短的语法，并从词汇上绑定此值。 箭头function始终是匿名的 。

考虑到它来自reactjs应用程序，这在你的例子中特别适用。 正如@naomik指出的那样，在React中，你经常使用this访问一个组件的成员函数 。 例如：

 Unbound Explicitly bound Implicitly bound ------------------------------------------------------------------------------ function (field) { | function (field) { | field => e => { return function (e) { | return function (e) { | this.setState(...) | this.setState(...) | this.setState(...) } | }.bind(this) | } | }.bind(this) | } 

Answer 3

你可以这样想，每次看到一个箭头，就用function代替它。
function parameters是在箭头之前定义的。
所以在你的例子中：

 field => // function(field){} e => { e.preventDefault(); } // function(e){e.preventDefault();} 

然后在一起：

 function (field) { return function (e) { e.preventDefault(); }; } 

从文档 ：

 // Basic syntax: (param1, param2, paramN) => { statements } (param1, param2, paramN) => expression // equivalent to: => { return expression; } // Parentheses are optional when there's only one argument: singleParam => { statements } singleParam => expression