你应该知道的柯里化-白红宇

函数是一等公民

在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); //6sum(1)(2,3); //6sum(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); //6sumWithCurry(1)(2,3); //6sumWithCurry(1,2)(3); //6复制代码

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

Notice

如果您觉得该让您有所收获，请「Star 」支持楼主。

如果您想持续关注楼主的最新系列文章，请「Watch」订阅