How to implement partial function in JavaScript - three-way sum partial application — Stack Overflow

在JavaScript函数式编程的演进中，偏函数（Partial Function）作为一种高级技巧，正被越来越多的开发者所关注。它允许开发者将一个多参数函数“冻结”部分参数，生成一个新的简化函数，从而提升代码复用性和可读性。本文以经典的三数求和为例，手把手带你实现偏函数应用。

偏函数：概念与价值

所谓偏函数，是指通过固定一个函数的部分参数，返回一个接受剩余参数的新函数。与函数柯里化（Currying）不同，柯里化是将多参数函数转换为一系列单参数函数，而偏函数则更灵活——可以一次性固定任意数量的参数，保留剩余参数待后续传入。

在真实开发场景中，偏函数的意义尤为突出：当你需要反复调用同一个函数，且其中部分参数固定不变时，偏函数能避免重复代码。比如在事件处理、API请求配置、数学计算等场景，偏函数都能发挥巨大作用。

三数求和：从基础函数到偏函数

假设我们需要实现一个三数求和的函数sumThree(a, b, c)，它接收三个数字并返回它们的和。传统写法很简单：

function sumThree(a, b, c) {
  return a + b + c;
}

现在，我们希望通过偏函数实现这样的效果：预先固定第一个参数，生成一个新函数，该函数只接受剩余两个参数。例如：

const sumWithFive = partial(sumThree, 5);
sumWithFive(10, 20); // 返回 5+10+20 = 35

为此，我们需要实现一个通用的partial函数。这个通用函数接收一个原始函数以及需要固定的参数值，返回一个新函数，该新函数接收剩余参数，并在内部调用原始函数，将固定参数和剩余参数合并后执行。

核心实现代码

以下是一个简洁的partial实现：

function partial(fn, ...presetArgs) {
  return function(...laterArgs) {
    return fn(...presetArgs, ...laterArgs);
  };
}

该函数利用了ES6的剩余参数和展开运算符，将所有预置参数和后续参数合并。测试一下：

const addTen = partial(sumThree, 10);
console.log(addTen(20, 30)); // 60
const addHundred = partial(sumThree, 100);
console.log(addHundred(1, 2)); // 103

完美运行！但这只是最基础的形式。实际应用中，我们可能希望偏函数能支持占位符，允许开发者不按顺序固定参数。比如，固定第二个参数，而第一个和第三个参数待后续传入。

支持占位符的增强版

占位符通常用一个特殊对象表示，比如_。当偏函数遇到占位符时，会跳过该位置，等待后续参数填充。实现如下：

const _ = {}; // 占位符

function partialWithPlaceholder(fn, ...presetArgs) {
  return function(...laterArgs) {
    let args = [];
    let laterIndex = 0;
    for (let i = 0; i < presetArgs.length; i++) {
      if (presetArgs[i] === _) {
        args.push(laterArgs[laterIndex++]);
      } else {
        args.push(presetArgs[i]);
      }
    }
    // 将尚未用到的后续参数追加到末尾
    args = args.concat(laterArgs.slice(laterIndex));
    return fn(...args);
  };
}

现在，我们可以这样调用：

const sumWithMiddle = partialWithPlaceholder(sumThree, _, 20, _);
console.log(sumWithMiddle(10, 30)); // 10+20+30 = 60

占位符的灵活性极大扩展了偏函数的应用场景，尤其在函数参数位置敏感时更显威力。

实际场景：配置化求和与事件处理

偏函数不仅仅是理论玩具。以三数求和为例，假设我们要为不同场景生成加固定税率的求和函数：

const calcTotal = (price, taxRate, quantity) => price * quantity * (1 + taxRate);
const calcWithTax = partial(calcTotal, _, 0.13, _); // 固定税率13%
calcWithTax(100, 5); // 100*5*1.13 = 565

在事件处理中，我们可以用偏函数绑定固定数据：

const handleClick = (message, event) => {
  console.log(message, event.target);
};
const handleSaveClick = partial(handleClick, '保存按钮被点击');
document.querySelector('#save').addEventListener('click', handleSaveClick);

偏函数让参数预绑定变得优雅，避免了闭包陷阱和回调地狱。

业界趋势与性能考量

目前，很多JavaScript函数式编程库（如Lodash、Ramda）都内置了partial函数。Lodash的_.partial和_.partialRight更是提供了完善的占位符支持。然而，在简单的需求下，手写一个partial不仅轻量，而且能让开发者深入理解其机制。

需要提醒的是，偏函数会创建新的函数，如果调用过于频繁，可能带来微小的性能开销。但在绝大多数应用场景中，这种开销可忽略不计。更值得关注的是代码的可读性和维护性——偏函数能清晰表达意图，减少魔法数字和重复代码。

总结

从三数求和这个小例子出发，我们探索了JavaScript偏函数的核心实现与高级技巧。偏函数通过固定部分参数来生成专用函数，不仅提升了代码复用性，也增加了代码语义的清晰度。无论是原生手写还是借助库函数，掌握这一技巧都将让你的函数式编程能力更上一层楼。下一次当你面对多参数函数时，不妨思考一下：能否用偏函数让代码更简洁？

How to implement partial function in JavaScript - three-way sum partial application