什么是柯里化？

想象你要去快餐店点单：

• 普通做法：一次性告诉店员“要一个巨无霸套餐，加可乐去冰，薯条换玉米杯”
• 柯里化做法：先选套餐类型 → 再定制饮料 → 最后调整小食

柯里化（Currying）就是把一个多参数的函数，拆解成多次接收单个参数的过程。比如普通加法函数add(a, b)，柯里化后变成add(a)(b)。举个代码例子：

// 普通函数
function add(a, b) {
  return a + b;
}

// 柯里化版本
function curriedAdd(a) {
  return function(b) {
    return a + b;
  };
}

console.log(add(2, 3));         // 5
console.log(curriedAdd(2)(3));  // 5

这个拆解过程就像把汉堡包的组装步骤拆开，你可以先烤面包，再煎肉饼，最后加酱料。

为什么需要柯里化？三大实战价值

1. 参数复用：拒绝重复劳动

假设要验证手机号和邮箱：

// 普通写法：每次都要传正则和内容
function validate(regex, value) {
  return regex.test(value);
}

// 柯里化版本：先“锁定”正则
function curriedValidate(regex) {
  return function(value) {
    return regex.test(value);
  };
}

// 生成专用验证器
const isPhone = curriedValidate(/^1\d{10}$/);
const isEmail = curriedValidate(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);

isPhone("13812345678"); // true
isEmail("test@example"); // false

就像快餐店提前准备好半成品，点单时直接组合。

2. 延迟执行：需要时再触发

前端常见场景：事件处理函数需要额外参数

// 普通写法：用匿名函数包裹
button.addEventListener('click', () => handleClick(userId));

// 柯里化版本：提前绑定部分参数
const curriedHandleClick = (userId) => (event) => {
  event.preventDefault();
  console.log(`用户${userId}点击了按钮`);
};

button.addEventListener('click', curriedHandleClick(123));

相当于先准备好用户ID这个“肉饼”，点击事件发生时再加上“面包”（event对象）。

3. 组合函数：像乐高一样拼接

配合管道函数实现数据处理流：

// 柯里化工具函数
const filter = (fn) => (arr) => arr.filter(fn);
const map = (fn) => (arr) => arr.map(fn);

// 组合使用
const processData = pipe(
  filter(x => x.age > 18),  // 先过滤
  map(x => ({ ...x, age: x.age + 1 })) // 再修改
);

processData([{name: 'Alice', age: 20}, {name: 'Bob', age: 17}]);
// 输出: [{name: 'Alice', age: 21}]

每个函数都变成可插拔的模块，组合出无限可能。

实战应用场景

1. 表单校验工厂

统一处理错误提示风格：

const createValidator = (errorMsg) => (validateFn) => (value) => {
  if (!validateFn(value)) throw new Error(errorMsg);
};

// 创建具体校验器
const checkRequired = createValidator("必填字段")(value => !!value);
const checkMinLength = (min) => 
  createValidator(`至少${min}位`)(value => value.length >= min);

// 使用
checkRequired(""); // 抛出错误
checkMinLength(6)("12345"); // 抛出错误

2. API请求标准化

统一处理接口认证：

const createApiClient = (baseURL) => (token) => (endpoint) => {
  return fetch(`${baseURL}/${endpoint}`, {
    headers: { Authorization: `Bearer ${token}` }
  });
};

// 初始化配置
const myApi = createApiClient('https://api.example.com')('secret_token');

// 业务调用
myApi('users/123'); 
myApi('products');

3. 动态权限控制

根据角色控制组件渲染：

const withPermissions = (requiredRoles) => (Component) => {
  return function WrappedComponent(props) {
    const userRoles = getUserRoles(); // 获取当前用户角色
    return requiredRoles.some(role => userRoles.includes(role)) 
      ? <Component {...props} />
      : <div>无权限查看</div>;
  };
};

// 创建高阶组件
const AdminPanel = withPermissions(['admin'])(AdminComponent);
const EditorPanel = withPermissions(['admin', 'editor'])(EditorComponent);

4. 性能优化：防抖/节流

柯里化实现参数化控制：

const debounce = (delay) => (fn) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

// 创建不同强度的防抖函数
const debounce200 = debounce(200);
const debounce500 = debounce(500);

input.addEventListener('input', debounce200(handleSearch));
window.addEventListener('resize', debounce500(handleResize));

如何自己实现柯里化？

一个基础实现方案：

function curry(fn) {
  return function curried(...args) {
    // 参数足够时直接执行
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } 
    // 参数不足时返回新函数
    else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

// 使用示例
const curriedAdd = curry((a, b, c) => a + b + c);
console.log(curriedAdd(1)(2)(3)); // 6

这就像搭建一个参数收集器，直到攒够原料才开始“烹饪”。

五、注意事项：

1. 性能取舍
   柯里化会产生嵌套函数，在超高频调用的场景（如动画循环）需谨慎使用。
2. 可读性平衡
   过度柯里化的代码可能变成“谜语”，团队项目中要控制层级深度。
3. 参数顺序策略
   把易变的参数放在后面，例如(baseURL)(endpoint)比(endpoint)(baseURL)更合理。
4. 拥抱现代化语法
   结合ES6的箭头函数更简洁：

const add = a => b => a + b;
const filter = fn => arr => arr.filter(fn);