003_浅谈函数柯里化

欢迎到github交流前端技术https://maze1943.github.io/Front-End-Maze/
查看我的github仓库https://github.com/maze1943/Front-End-Maze

这篇文章的主题是函数柯里化，之前零零碎碎的从一些途径上了解过一些，我理解的柯里化是javascript函数式编程的一个很好的例子，今天做题时遇到了一道相关的题目，正好借此机会翻阅了一些大牛的技术博客和官方资料，在这里分享给大家。

题目如下：

已知 fn 为一个预定义函数，实现函数 curryIt，调用之后满足如下条件：
1、返回一个函数 a，a 的 length 属性值为 1（即显式声明 a 接收一个参数）
2、调用 a 之后，返回一个函数 b, b 的 length 属性值为 1
3、调用 b 之后，返回一个函数 c, c 的 length 属性值为 1
4、调用 c 之后，返回的结果与调用 fn 的返回值一致
5、fn 的参数依次为函数 a, b, c 的调用参数

输入：
var fn = function (a, b, c) {return a + b + c};
curryIt(fn)(1)(2)(3);

输出：
6

这道题目当然可以嵌套返回三个函数，将接受的参数传入最后的fn进行处理。比如：

// 糟糕的嵌套
function curryIt(fn) {
    return function a(xa){
        return function b(xb){
            return function c(xc){
                return fn.call(this,xa,xb,xc);
            };
        };
    };
}

但这对于一个开发者来说，显然不是良好的代码。柯里化就是处理此类问题的一个良好思路，那么什么是柯里化（Currying）？

定义

柯里化 是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回一个新的函数的技术，新函数接受余下参数并返回运算结果。

定义看起来并不复杂，名字很高端，但其实只是一种技术方案而已。回归到之前的题目，如果使用柯里化的思想如何解决呢？考虑以下代码：

例子

function curryIt(fn) {
    var func;
    var _arg = [].slice.call(arguments, 1);
    func = function () {
        _arg = _arg.concat([].slice.call(arguments));
        if (fn.length === _arg.length) {
            return fn.apply(this, _arg);
        }
        return func;
    }
    return func;
}

var fn1 = function (a,b,c,d,e) {
    var res = [].slice.call(arguments).reduce(function(pre,next){
        return pre + next;
    });
    return res;
};
curryIt(fn1)(1)(2)(3)(4)(5);//15

本段代码中，执行curryIt(fn)时，_arg作为一个参数数组，作用是归并除了第一个函数之外，剩余所有参数；因为闭包，_arg得以保存，并在后续每一次调用返回函数Func时收集Func的参数；函数func则被递归调用，直到收集的参数达到fn的形参个数，此时将_arg作为参数数组传入fn并执行。这就是柯里化的一个例子（通常不需要这么复杂，大部分场景分为两部分已足够使用），外部函数接收了第一个参数回调方法，返回一个接受剩余参数并执行回调方法的函数。

柯里化通式

柯里化是否可以提炼为一个通式呢，答案是肯定的：

var curryFunc = function(fn) {
    var args = [].slice.call(arguments, 1);

    return function() {
        var _args = args.concat([].slice.call(arguments));
        return fn.apply(null, _args);
    }
}

以上就是一个简单的柯里化通式，与前面例子基本一致，不做更多解释了。那么，说了这么多，究竟柯里化可以应用在哪些地方，柯里化能为我们做到什么？

柯里化的应用

这里举例说明一下在我们开发中可以应用柯里化的地方：
比如参数复用：

// 正常正则验证字符串 reg.test(txt)

function check(reg, txt) {
    return reg.test(txt)
}

check(/\d+/g, 'testtest');      //false
check(/\d+/g, 'test');      //false
check(/[a-z]+/g, 'testtest');   //true
check(/[a-z]+/g, 'test');   //true

//如果我们代码中需要对字符串做同一正则校验的地方有很多处
//实际上我们没有必要在每一次校验的时候都传入相同的正则表达式

// 应用柯里化
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}

var hasNumber = curryingCheck(/\d+/g);
var hasLetter = curryingCheck(/[a-z]+/g);
// 柯里化后，正则表达式作为第一个参数被传入并保存

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

看到各位大牛还提到了其他方面，有兴趣可以参考

详解JS函数柯里化 by flowsands

深入详解函数的柯里化 by 这波能反杀