Javascript柯里化实现原理及作用解析

什么是柯里化？

柯里化（Currying）是一种函数式编程技巧，它是指将接受多个参数的函数转变为接受单一参数的函数，并且返回一个新函数来处理剩余的参数。

举个例子，将如下的函数：

function add(x, y, z) {
  return x + y + z;
}

转变为柯里化的形式：

function add(x) {
  return function(y) {
    return function(z) {
      return x + y + z;
    }
  }
}

这里返回了一个函数，我们可以通过它多次调用来进行参数的传递，比如：

add(1)(2)(3) // 输出 6

实现柯里化的原理

Javascript中的函数是一等公民，它们可以作为参数或者是返回值传递。实现柯里化的方法是，通过返回一个新函数来绑定函数的参数，这个新函数可以接受更多的参数，并且等待后续的调用。

下面给出一个示例来讲解柯里化的实现原理：

function curry(fn) {
  return function curried(...args) {
    if (args.length < fn.length) {
      return function(...args2) {
        return curried(...args, ...args2);
      }
    } else {
      return fn(...args);
    }
  };
}

curry函数接受一个函数fn作为参数，返回一个新函数curried。当我们调用curry后返回的新函数时，它可以接受一个或多个参数，并等待后续的调用。

当我们传递的参数少于原始函数需要的参数数量时，curried会返回一个新函数，这个函数通过将先前传递的参数与当前传递的参数合并，来等待后续的调用。而如果参数的数量足够时，curried将会调用原始的函数fn，并返回结果。

柯里化的作用

柯里化函数可以使我们更方便地重复使用一些类似的函数，以提高应用程序的性能和可维护性。柯里化也可以帮助我们实现一些更高级的技术，例如函数组合和管道。

下面的示例展示了如何使用柯里化来实现一个可以接受不同数量参数的实用函数：

function sum(...args) {
  return args.reduce((acc, val) => acc + val);
}

const currySum = curry(sum);

currySum(1, 2, 3); // 输出 6
currySum(1)(2)(3); // 输出 6
currySum(1, 2)(3); // 输出 6
currySum()(1, 2, 3); // 输出 6

可以看到，在这个示例中，我们可以通过使用curry函数来实现一个能够接受不同数量的参数的sum函数，并且在调用时更为灵活方便。

示例1

下面是一个示例，展示了如何将Javascript内置的addEventListener方法，通过使用柯里化来实现监听多个事件类型的需求：

const addEventListener = (el, eventType, callback) => {
  el.addEventListener(eventType, callback);
};

const curriedAddEventListener = curry(addEventListener);

const element = document.getElementById('button');
curriedAddEventListener(element)('click')(event => console.log('Clicked!'))('mouseover')(event => console.log('Mouseover!'));

这个示例在curriedAddEventListener调用时，可以接受任意数量和类型的事件类型和回调函数，它通过柯里化的实现，实现了没哟调用多次addEventListener的需求。

示例2

下面的示例展示了如何使用柯里化和函数组合来实现聚焦输入框时，自动清空输入框中的内容：

const getInputValue = event => event.target.value;

const clearInputValue = el => {
  el.value = '';
};

const handleFocusInput = el => pipe(getInputValue, clearInputValue)(el);

const curriedHandleFocusInput = curry(handleFocusInput);

document.getElementById('input-box')('focus')(curriedHandleFocusInput);

在这个示例中，我们定义了函数getInputValue和clearInputValue，以分别获取输入框的值和清空输入框的值。handleFocusInput函数通过使用pipe函数来实现函数的组合，在输入框聚焦事件触发时，使用curry柯里化的方式，将clearInputValue回调函数传递给handleFocusInput，并绑定输入框元素上的focus事件监听器，实现了聚焦输入框自动清空内容的功能。