三言两语说透柯里化和反柯里化-51CTO.COM

JavaScript中的柯里化(Currying)和反柯里化(Uncurrying)是两种很有用的技术，可以帮助我们写出更加优雅、泛用的函数。本文将首先介绍柯里化和反柯里化的概念、实现原理和应用场景，通过大量的代码示例帮助读者深入理解这两种技术的用途。

JavaScript中的柯里化

概念

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。这个技术由数学家Haskell Curry命名。

简单来说，柯里化可以将使用多个参数的函数转换成一系列使用一个参数的函数。例如：

function add(a, b) {
  return a + b; 
}

// 柯里化后
function curriedAdd(a) {
  return function(b) {
    return a + b;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

实现原理

实现柯里化的关键是通过闭包保存函数参数。以下是柯里化函数的一般模式：

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));
      }
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

curry函数接受一个fn函数为参数，返回一个curried函数。curried函数检查接收的参数个数args.length是否满足fn函数需要的参数个数fn.length。如果满足，则直接调用fn函数;如果不满足，则继续返回curried函数等待接收剩余参数。

这样通过闭包保存每次收到的参数，直到参数的总数达到fn需要的参数个数，然后将保存的参数全部 apply 给 fn执行。

利用这个模式可以轻松将普通函数柯里化:

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

// 柯里化后
let curriedAdd = curry(add); 
curriedAdd(1)(2); // 31.
2.
3.
4.
5.
6.
7.
8.

应用场景

参数复用

柯里化可以让我们轻松复用参数。例如:

function discounts(price, discount) {
  return price * discount;
}

// 柯里化后
const tenPercentDiscount = discounts(0.1); 
tenPercentDiscount(500); // 50
tenPercentDiscount(200); // 201.
2.
3.
4.
5.
6.
7.
8.

提前返回函数副本

有时我们需要提前返回函数的副本给其他模块使用,这时可以用柯里化。

// 模块A
function ajax(type, url, data) {
  // 发送ajax请求
}

// 柯里化后
export const getJSON = curry(ajax)('GET');

// 模块B
import { getJSON } from './moduleA'; 

getJSON('/users', {name: 'John'});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

延迟执行

柯里化函数在调用时并不会立即执行，而是返回一个函数等待完整的参数后再执行。这让我们可以更加灵活地控制函数的执行时机。

let log = curry(console.log);

log('Hello'); // 不会立即执行

setTimeout(() => {
  log('Hello'); // 2秒后执行
}, 2000);1.
2.
3.
4.
5.
6.
7.

JavaScript中的反柯里化

概念

反柯里化(Uncurrying)与柯里化相反，它将一个接受单一参数的函数转换成接受多个参数的函数。

// 柯里化函数  
function curriedAdd(a) {
  return function(b) {
    return a + b;
  }
}

// 反柯里化后
function uncurriedAdd(a, b) {
  return a + b; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

实现原理

反柯里化的关键是通过递归不停调用函数并传入参数，Until参数的数量达到函数需要的参数个数。

function uncurry(fn) {
  return function(...args) {
    let context = this;
    return args.reduce((acc, cur) => {
      return acc.call(context, cur); 
    }, fn);
  }
}1.
2.
3.
4.
5.
6.
7.
8.

uncurry 接收一个函数 fn，返回一个函数。这个函数利用reduce不停调用 fn 并传入参数，Until 把args所有参数都传给 fn。

利用这个模式可以轻松实现反柯里化：

const curriedAdd = a => b => a + b;

const uncurriedAdd = uncurry(curriedAdd);
uncurriedAdd(1, 2); // 31.
2.
3.
4.

应用场景

统一接口规范

有时我们会从其他模块接收到一个柯里化的函数,但我们的接口需要一个普通的多参数函数。这时可以通过反柯里化来实现统一。

// 模块A导出
export const curriedGetUser = id => callback => {
  // 调用callback(user)
};

// 模块B中
import { curriedGetUser } from './moduleA';

// 反柯里化以符合接口
const getUser = uncurry(curriedGetUser); 

getUser(123, user => {
  // use user
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

提高参数灵活性

反柯里化可以让我们以任意顺序 passes 入参数,增加了函数的灵活性。

const uncurriedLog = uncurry(console.log);

uncurriedLog('a', 'b'); 
uncurriedLog('b', 'a'); // 参数顺序灵活1.
2.
3.
4.

支持默认参数

柯里化函数不容易实现默认参数，而反柯里化后可以方便地设置默认参数。

function uncurriedRequest(url, method='GET', payload) {
  // 请求逻辑
}1.
2.
3.

大厂面试题解析

实现add(1)(2)(3)输出6的函数

这是一道典型的柯里化面试题。解析：

function curry(fn) {
  return function curried(a) {
    return function(b) {
      return fn(a, b);
    }
  }
}

function add(a, b) {
  return a + b;
}

const curriedAdd = curry(add);

curriedAdd(1)(2)(3); // 61.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

利用柯里化技术，我们可以将普通的 add 函数转化为 curriedAdd，它每次只接收一个参数，并返回函数等待下一个参数，从而实现了 add(1)(2)(3) 的效果。

实现单参数compose函数

compose函数可以将多个函数合并成一个函数，这也是一道常见的柯里化面试题。解析：

function compose(fn1) {
  return function(fn2) { 
    return function(x) {
      return fn1(fn2(x));
    };
  };
}

function double(x) {
  return x * 2;
}

function square(x) {
  return x * x;
}

const func = compose(double)(square);

func(5); // 501.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

利用柯里化，我们创建了一个单参数的 compose 函数，它每次返回一个函数等待下一个函数参数。这样最终实现了 compose(double)(square) 的效果。

反柯里化Function.bind

Function.bind 函数实现了部分参数绑定，这本质上是一个反柯里化的过程。解析：

Function.prototype.uncurriedBind = function(context) {
  const fn = this;
  return function(...args) {
    return fn.call(context, ...args);
  } 
}

function greet(greeting, name) {
  console.log(greeting, name);
}

const greetHello = greet.uncurriedBind('Hello');
greetHello('John'); // Hello John1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

uncurriedBind 通过递归调用并传参实现了反柯里化，使 bind 参数从两步变成一步传入，这也是 Function.bind 的工作原理。

总结

柯里化和反柯里化都是非常有用的编程技巧，让我们可以写出更加灵活通用的函数。理解这两种技术的实现原理可以帮助我们更好地运用它们。在编码中，我们可以根据需要决定是将普通函数柯里化，还是将柯里化函数反柯里化。合理运用这两种技术可以大大提高我们的编程效率。