Javascript中的柯里化
什么是柯里化
柯里化，是函数式编程的一个重要概念。对于没接触过的人来说，会被一串串的小括号弄得摸不着头脑。但一旦理解了其中的含义和具体的使用场景，你一定会对它爱不释手。它既能减少代码冗余，也能增加可读性，可谓程序猿居家旅行，装逼撕逼必备之良药。
如果一个函数可以接收多个参数，将这个函数转化为每次只接收一部分参数的函数的多次调用形式，就是柯里化。文字上理解比较困难，先来看看下面的代码：
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);
});
}
};
这段代码的作用就是根据浏览器的类型决定事件添加的方式。实际上if…else的判断只需要进行一次。将它柯里化后可以得到以下结果:
var addEvent = (function(){
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);
});
};
}
})();
使用场景2: 代码复用
在有回调函数的场景下，可以通过柯里化传入一些预设的值，排列组合后，达到代码复用的效果:
const match = (reg) => (str) => str.match(reg);
const hasSpace = match(/\s+/g);
const filter = (fn) => (arr) => arr.filter(fn);
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能力
灵活使用柯里化，提高代码质量不是梦！
热点新闻
前端开发技术库
