JavaScript 中的多个嵌套箭头函数如何工作？

理解 JavaScript 中的多个箭头函数

在 JavaScript 中，你可能会遇到这样的代码：

  e.preventDefault();
  /// Do something here
}

柯里化函数

这段代码演示了柯里化函数。柯里化函数是一个返回函数的函数，允许您部分应用参数。

考虑以下示例（没有箭头函数）：

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

柯里化形式：

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

没有箭头函数：

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

聚焦返回值

箭头函数的行为如下（注意返回值）：

const f = someParam => returnValue

因此，在我们的 add 函数中，一个数字返回一个函数：

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

这意味着数字相加返回一个函数：

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

调用柯里化函数

要使用柯里化函数，请以不同的方式调用它：

add(2)(3)  // returns 5

这是因为第一个函数调用返回第二个函数。只有第二个函数调用才能给出实际结果。

在您的代码中的应用

在您的代码中：

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

没有箭头函数：

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

由于箭头函数在词法上绑定 this，它看起来更像this:

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

这意味着handleChange为指定字段创建一个函数。这是一种为每个输入设置事件监听器而无需重复的 React 技术。

更多箭头

可以对两个以上的箭头函数进行排序：

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

柯里化和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

以上是JavaScript 中的多个嵌套箭头函数如何工作？的详细内容。更多信息请关注PHP中文网其他相关文章！