你应该知道的柯里化-CSDN博客

函数是一等公民

在JS里函数是一等公民，它跟其他类型(字符，数字，数组，对象)等一样，都是可以直接当成参数传递或者当成返回值返回的。活用函数是一个前端开发必备的基础技能。

举个简单的例子，假设我们要打印出一个数组的所有元素的话，大部分人可能会这样做：

function printWithLoop(arr) {
    for (let i = 0, len = arr.length; i < len; i++) {
        console.dir(arr[i]);
    }
}复制代码

当你对高阶函数(higher-order function)有一点了解之后，你可能会习惯用forEach：

function printWithIterator(arr) {
    (arr || []).forEach(it => {
        console.dir(it);
    });
}复制代码

上面的例子又可以进一步优化为：

function simplePrint(arr) {
    (arr || []).forEach(console.dir);
}复制代码

此处可以有道面试题：如果上面的console.dir替换成console.log的话上面3种做法还是等价的么？

函数柯里化

柯里化，又称部分求值，简单的说就是在函数运行时把参数吃进来，并同时返回一个新的函数(该函数通过闭包的特性可以访问到前面调用时吃进来的参数)，供后续调用。

形参 vs 实参

柯里化跟参数息息相关。参数有2个概念：

形参(parameters)：函数定义时的占位符。可通过function.length得到形参个数

function A(a, b) {}
// a跟b就是形参
console.log(A.length); //2复制代码

实参(arguments): 函数调用时传进来的参数。可通过arguments获得

function B(a, b) {
    console.log(arguments);
}

B(1,2,3); // 1,2,3复制代码

形参就是这个函数期望的参数，实参就是这个函数调用时实际得到的参数。有了这2个数据我们就可以做很多事情了。

简单的柯里化小例子

假设我们有个求3个数字之和的函数:

function sum(x, y, z) {
    console.log(x + y + z);
}

sum(1,2,3); //6复制代码

如果我想实现下面这样的效果:

sum(1,2,3); //6
sum(1)(2,3); //6
sum(1,2)(3); //6复制代码

思考一下规律，其实就是当sum函数得到了它期望的参数(i.e. 3个参数)时，它就返回结果。要不然就返回一个新的函数(e.g. sum(1)跟sum(1,2))持续吃进新参数。这时候就用到柯里化的思想。

function curry(fn) { //暂时不考虑上下文this的情况
    return function f(...args) {
        //传进来的参数个数不少于形参个数，调用并返回结果
        if(args.length >= fn.length) { 
            return fn.apply(this, args);
        } else {
            //传进来的参数个数少于形参个数，返回一个闭包
            return function(...arr) { 
                return f.apply(this, args.concat(arr));
            }
        }
    }
}

let sumWithCurry = curry(sum);
sumWithCurry(1,2,3); //6
sumWithCurry(1)(2,3); //6
sumWithCurry(1,2)(3); //6复制代码

bind

Function.prototype.bind方法除了有绑定执行语境this的功能外，还有柯里化的功能。

function sayHi(greeting, ending) {
    console.log(`My name is ${this.name}, ${greeting}. ${ending}!`);
}

//这里已经把greeting吃进去了
let fn = sayHi.bind({name: 'mike'}, 'Love you'); 
fn('Thanks!'); // My name is mike, Love you. Thanks!!复制代码

实际工作中可以巧用柯里化去写更优雅的代码。

function print(arr) {
    console.log(arr.join('|'));
}

let arr = [1,2,3];
setTimeout(function(){
    print([1,2,3]);
}, 1000);
// 1|2|3复制代码

等价于

function print(arr) {
    console.log(arr.join('|'));
}

let arr = [1,2,3];
setTimeout(print.bind(null, arr), 1000);
// 1|2|3复制代码

Reference

Effective Javascript

Notice

如果您觉得该Repo让您有所收获，请「Star 」支持楼主。
如果您想持续关注楼主的最新系列文章，请「Watch」订阅