JavaScript 中的柯里化如何与多个箭头函数一起工作？

在 JavaScript 中使用多个箭头函数进行柯里化

你可能会在 React 应用程序中遇到这样的代码：

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

这种令人费解的语法代表了所谓的 柯里化function.

什么是柯里化？

柯里化是一种允许函数分段定义的技术。例如：

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)(3)  // returns 5

发生这种情况是因为外部函数调用返回内部函数。

理解handleChange代码

将其应用到handleChange代码：

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

因为箭头函数保留上下文，所以它实际上看起来像：

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

此代码为特定字段创建一个函数。在 React 中，它用于为各种输入字段设置侦听器，而无需重复代码。

多个箭头函数

可以对多个箭头函数进行排序，从而实现令人惊讶的功能，例如this:

const $ = x => k =>
  $ (k(x))

这个柯里化函数，称为 $ （作为 Lisp 语法的双关语），似乎是接受任意数量的参数，抽象数量的概念。

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