你应该知道的柯里化

函数是一等公民

在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」订阅