多个箭头函数在javascript中意味着什么?

这是一个 curred function

首先,用两个参数检验这个函数...

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

在这里,它再一次以曲折的形式...

 const add = x => y => x + y
 

这是没有箭头函数的same1代码...

 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)
 

调用curred函数

所以为了使用我们的curring函数,我们必须有点不同地调用它...

 add(2)(3)  // returns 5
 

这是因为第一个(外部)函数调用返回第二个(内部)函数.只有在我们调用第二个函数后,我们才能实际得到结果.如果我们将调用分开两行,这更明显...

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

对代码应用我们的新理解

相关:“绑定,部分应用和curring之间有什么区别?”

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

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

我们首先代表它而不使用箭头函数...

 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创建一个函数.这是一个方便的反应技术,因为您需要在每个输入上设置自己的监听器以更新您的应用程序状态.通过使用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
 

curred函数能够令人惊讶.下面我们看到$定义为具有两个参数的curred函数,但在调用站点,似乎我们可以提供任何数量的参数. curresting是 interation 的抽象 –

 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 

部分适用

部分应用程序是一个相关的概念.它允许我们部分应用函数,类似于curching,除非函数不必以curred形式定义 –

 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">