那是一个咖喱函数
首先，使用两个参数检查此功能……
const add = (x, y) => x + y
add(2, 3) //=> 5
这里又是咖喱形式的……
const add = x => y => x + y
这是没有箭头功能的相同1个代码……
const add = function (x) {
return function (y) {
return x + y
}
}
专注于 return
用另一种方式可视化可能会有所帮助。我们知道箭头函数是这样工作的-让我们特别注意返回值。
const f = someParam => returnValue
因此，我们的add函数返回一个函数 –我们可以使用括号来增加清晰度。该粗体文字是我们的函数的返回值add
const add = x => (y => x + y)
换句话说add，某个数字返回一个函数
add(2) // returns (y => 2 + y)
调用咖喱函数
因此，为了使用我们的curried函数，我们必须对其进行一些不同的调用……
add(2)(3) // returns 5
这是因为第一个（外部）函数调用返回了第二个（内部）函数。只有在调用第二个函数之后，我们才真正得到结果。如果我们将呼叫分隔在两行上，则更明显……
const add2 = add(2) // returns function(y) { return 2 + y }
add2(3) // returns 5
将我们的新知识应用于您的代码
相关：“绑定，部分应用和柯林有什么区别？”
好，现在我们了解了它的工作原理，让我们看一下您的代码
handleChange = field => e => {
e.preventDefault()
/// Do something here
}
我们将从不使用箭头功能来表示它开始……
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
};
};
但是，由于arrow函数按词法绑定了this，因此实际上看起来更像这样……
handleChange = function(field) {
return function(e) {
e.preventDefault()
// Do something here
// return ...
}.bind(this)
}.bind(this)
也许现在我们可以更清楚地看到它在做什么。该handleChange函数正在为指定的创建函数field。这是一种方便的React技术，因为您需要在每个输入上设置自己的侦听器以更新您的应用程序状态。通过使用该handleChange函数，我们可以消除所有重复的代码，这些代码将导致change为每个字段设置侦听器。凉！
1在这里，我不必进行词法绑定，this因为原始add函数不使用任何上下文，因此在这种情况下保留它并不重要。
甚至更多的箭
如有必要，可以排序两个以上的箭头功能-
const three = a => b => c =>
a + b + c
const four = a => b => c => d =>
a + b + c + d
three (1) (2) (3) // 6
four (1) (2) (3) (4) // 10
咖喱函数能够使人惊讶。在下面，我们看到$定义为具有两个参数的咖喱函数，但是在调用站点，似乎可以提供任意数量的参数。柯里是抽象元数 -
const $ = x => k =>
$ (k (x))
const add = x => y =>
x + y
const mult = x => y =>
x * y
$ (1) // 1
(add (2)) // + 2 = 3
(mult (6)) // * 6 = 18
(console.log) // 18
$ (7) // 7
(add (1)) // + 1 = 8
(mult (8)) // * 8 = 64
(mult (2)) // * 2 = 128
(mult (2)) // * 2 = 256
(console.log) // 256
部分申请
部分应用是一个相关的概念。它允许我们部分地应用函数，类似于currying，除了不必以咖喱形式定义函数-
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const add3 = (x, y, z) =>
x + y + z
partial (add3) (1, 2, 3) // 6
partial (add3, 1) (2, 3) // 6
partial (add3, 1, 2) (3) // 6
partial (add3, 1, 2, 3) () // 6
partial (add3, 1, 1, 1, 1) (1, 1, 1, 1, 1) // 3
这是partial您可以在自己的浏览器中播放的工作演示-
const partial = (f, ...a) => (...b) =>
f (...a, ...b)
const preventDefault = (f, event) =>
( event .preventDefault ()
, f (event)
)
const logKeypress = event =>
console .log (event.which)
document
.querySelector ('input[name=foo]')
.addEventListener ('keydown', partial (preventDefault, logKeypress))
<input name="foo" placeholder="type here to see ascii codes" size="50">
