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

Question

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

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

Answer 1

这是一个 curried function

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

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

又是 curry 形式……

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

这里是相同的¹代码，没有箭头函数……

const add = function (x) {
  return function (y) {
    return x + y
  }
}

---

关注返回

以另一种方式可视化它可能会有所帮助。我们知道箭头函数是这样工作的——让我们特别注意返回值。

const f = someParam => <b>returnValue</b>

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

的返回值

const add = x => <b>(y => x + y)</b>

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

add(2) // returns (y => 2 + y)

---

调用柯里化(Currying)函数

因此，为了使用我们的 curried 函数，我们必须稍微不同地调用它……

add(2)(3)  // returns 5

这是因为第一个(外部)函数调用返回了第二个(内部)函数。只有在我们调用第二个函数之后，我们才能真正得到结果。如果我们将调用分开两行，这一点会更加明显……

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

---

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

related: ”What’s the difference between binding, partial application, and currying?”

好的，现在我们了解了它的工作原理，让我们看看你的代码

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

我们将首先在不使用箭头函数的情况下表示它……

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

但是，由于箭头函数在词法上绑定(bind) this，它实际上看起来更像这样......

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

也许现在我们可以更清楚地看到它在做什么。 handleChange 函数正在为指定的field 创建一个函数。这是一种方便的 React 技术，因为您需要在每个输入上设置自己的监听器才能更新应用程序状态。通过使用 handleChange 函数，我们可以消除所有会导致为每个字段设置 change 监听器的重复代码。酷!

¹ 这里我不必对 this 进行词法绑定(bind)，因为原来的 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

柯里化(Currying)函数能够产生令人惊讶的事情。下面我们看到 $ 被定义为一个带有两个参数的柯里化(Currying)函数，但在调用站点，它看起来好像我们可以提供任意数量的参数。柯里化(Currying)是 arity 的抽象。 -

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)，只是函数不必以柯里化(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">