java 柯里化_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. 如果还有本文没有提到的柯里化用法，欢迎留言交流(^-^)