Javascript中的柯里化

欢迎关注我的公众号睿Talk，获取我最新的文章：

一、前言

柯里化，是函数式编程的一个重要概念。对于没接触过的人来说，会被一串串的小括号弄得摸不着头脑。但一旦理解了其中的含义和具体的使用场景，你一定会对它爱不释手。它既能减少代码冗余，也能增加可读性，可谓程序猿居家旅行，装逼撕逼必备之良药。

二、什么是柯里化

如果一个函数可以接收多个参数，将这个函数转化为每次只接收一部分参数的函数的多次调用形式，就是柯里化。文字上理解比较困难，先来看看下面的代码：

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

这个add函数接收3个参数，返回3个参数相加的结果。可以通过以下2种形式对其进行柯里化：

function addOne(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
            }
        }
    }
}

function addTwo(a,b) {
    return function(c) {
        return a + b + c;
    }
}

执行的时候，以下3种方式都会获得一样的结果：

add(1, 2, 3);        // return 6
addOne(1)(2)(3);     // return 6
addTwo(1, 2)(3);     // return 6

如果使用ES6语法，能更简洁的写出柯里化后的函数，以addOne为例:

const addOne = (a) => (b) => (c) => (a + b + c)

上面的例子没有什么实际的意义，只是为了说明概念而已。在了解基本概念后，我们来聊聊实际的使用场景。

三、使用场景

• 场景1: 性能优化

可以将一些模板代码通过柯里化的形式预先定义好，例如:

var addEvent = function(el, type, fn, capture) {
    if (window.addEventListener) {
        el.addEventListener(type, function(e) {
            fn.call(el, e);
        }, capture);
    } else if (window.attachEvent) {
        el.attachEvent("on" + type, function(e) {
            fn.call(el, e);
        });
    } 
};

addEvent(element, "click", handleClick, true);

这段代码的作用就是根据浏览器的类型决定事件添加的方式。实际上if...else的判断只需要进行一次。将它柯里化后可以得到以下结果:

function addCrossBrowserEvent() {
    if (window.addEventListener) {
        return function(el, sType, fn, capture) {
            el.addEventListener(sType, function(e) {
                fn.call(el, e);
            }, (capture));
        };
    } else if (window.attachEvent) {
        return function(el, sType, fn, capture) {
            el.attachEvent("on" + sType, function(e) {
                fn.call(el, e);
            });
        };
    }
}

var addEvent = addCrossBrowserEvent();

addEvent(element, "click", handleClick, true);

• 场景2: 代码复用

在有回调函数的场景下，可以通过柯里化传入一些预设的值，排列组合后，达到代码复用的效果:

// 匹配任何正则的函数
const match = (reg) => (str) => str.match(reg);
// 专门匹配空格
const hasSpace = match(/\s+/g);

// 封装数组的 filter 方法
const filter = (fn) => (arr) => arr.filter(fn);
// 专门找空格的 filter 方法
const findSpace = filter(hasSpace);

// 使用
let result = findSpace(['hi man', 'hi_man']);    //['hi man']

使用传统的方法实现以上效果，如下:

let result = ['hi man', 'hi_man'].filter( (item) => (item.match(/\s+/g)) );

虽然传统的方法看起来代码量比较少，但如果在很多地方需要使用的时候，就体现出封装的威力了。而且，还可以为filter方法传入其它的条件生成各式各样的find工具函数！

• 场景3: 使代码便于理解

react-redux的connect方法，就是使用了柯里化增加代码的可读性:

let Container = connect(mapStateToProps, mapDispatchToProps)(Component);

在这里，connect的作用就是将Component要用到的state切面和action注入到它的property中，达到展示型组件和容器组件分离的目的。如果将这个方法的定义改为:

let Container = connect(mapStateToProps, mapDispatchToProps, Component);

就没那么好理解了。而且，mapStateToProps和mapDispatchToProps实际上也是可选参数，在不传它们的情况下传入Component会显得很恶心: connect(null, null, Component)。

• 场景4: 扩展Javascript能力

ES5中的bind方法，就是通过柯里化实现的:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
}

四、总结

通过本文的介绍，相信你对柯里化已经有一个全新的认识了。它最少有以下4种功能：

• 性能优化
• 代码复用
• 使代码便于理解
• 扩展Javascript能力

灵活使用柯里化，提高代码质量不是梦！

P.S. 如果还有本文没有提到的柯里化用法，欢迎留言交流(^-^)