一、什么是Currying
定义：柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
// 普通的add函数
function add(x, y) {
return x + y
}
// Currying后
function curryingAdd(x) {
return function (y) {
return x + y
}
}
add(1, 2) // 3
curryingAdd(1)(2) // 3
实际上就是把add函数的x，y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了，就是只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。
二、Currying的优点
- 参数复用 – 复用最初函数的第一个参数
- 提前返回 – 返回接受余下的参数且返回结果的新函数
- 延迟执行 – 返回新函数，等待执行
// 正常正则验证字符串 reg.test(txt)
// 函数封装后
function check(reg, txt) {
return reg.test(txt)
}
//判断字符串中是否包含数字
check(/\d+/g, 'test') //false
//判断字符串中是否包含字母
check(/[a-z]+/g, 'test') //true
// Currying后
function curryingCheck(reg) {
return function(txt) {
return reg.test(txt)
}
}
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)
hasNumber('test1') // true
curryingCheck(/\d+/g)（'test1'） // true
hasNumber('testtest') // false
hasLetter('21212') // false
// 兼容IE浏览器事件监听方法
//原生事件监听的方法在现代浏览器和IE浏览器会有兼容问题，解决该兼容性问题的方法是进行一层封装，若不考虑柯里化函数，我们正常情况下会像下面这样进行封装，如下：
/*
* @param el Object DOM元素对象
* @param type String 事件类型
* @param fn Function 事件处理函数
* @param Capture Boolean 是否捕获
*/
var addEvent = function(el, type, fn, capture) {
if(window.addEventListener) {
el.addEventListener(type, function(e) {
fn.call(el, e)
}, capture)
} else {
el.attachEvent('on'+type, function(e) {
fn.call(el, e)
})
}
}
//唯一的缺陷就是，每次对DOM元素进行事件绑定时（每调用一次函数）都需要重新进行判断，其实对于事件监听网页一发布浏览器已经确定了，就可以知晓浏览器到底是需要哪一种监听方式。所以我们可以让判断只执行一次。
var curEvent = (function() {
if(window.addEventListener) {
return function(el, sType, fn, capture) { // return funtion
el.addEventListener(sType, function() {
fn.call(el, e)
}, capture)
}
} else {
return function(el, sType, fn) {
el.attachEvent('on'+sType, function(e) {
fn.call(el, e)
})
}
}
})
var addEvent = curEvent(); // addEvent 这回得到的，就是if..else...里面的那个return 的function，所以只需要curEvent()执行一遍判断了if..else，其他时候就都不需要判断了
addEvent(elem)
//这里面使用的其实就是柯里化的应用，在这里面addEvent 它就是提前返回了一个新的函数，而且这个函数是根据浏览器到底采用哪种监听而返回的。第一次调用addEvent会对浏览器做能力检测，然后，重写了addEvent。下次再调用的时候，由于函数被重写，不会再做能力检测。
这个例子利用了柯里化提前返回和延迟执行的特点：
- 提前返回 – 使用函数立即调用进行了一次兼容判断，返回兼容的事件绑定方法
- 延迟执行 – 返回新函数，在新函数中调用兼容的事件方法。等待addEvent新函数调用，延迟执行
//没有currying前
var fishWeight = 0;
var addWeight = function(weight) {
fishWeight += weight;
};
addWeight(2.3);
addWeight(6.5);
addWeight(1.2);
addWeight(2.5);
console.log(fishWeight); // 12.5
//currying后
//包装的思想就是
// 1.sum中建立一个数组arr，多次调用后，数组把所有的参数都接收到
// 2.当没有参数的时候，执行add.apply(arr)
//总的来说就是把一堆参数都先存起来，然后最后再来执行
var curryWeight = function(fn) {
var _fishWeight = [];
return function() {
if (arguments.length === 0) {
return fn.apply(null, _fishWeight);
} else {
_fishWeight = _fishWeight.concat([].slice.call(arguments));
}
}
};
var add = function() {
var fishWeight = 0;
for ( var i=0，len = arguments.length; i<len; i++) {
fishWeight += arguments[i];
}
return fishWeight
}
var sum = curryWeight(add);
sum(6.5);
sum(1.2);
sum(2.3);
sum(2.5);
sum(); // 这里才计算 结果为12.5
sum(6.5)(1.2)(2.3)(2.5)(); // 等效于这种 结果为12.5
三、Currying的实现
function curry (fn, currArgs) {
return function() {
let args = [].slice.call(arguments);
// 首次调用时，若未提供最后一个参数currArgs，则不用进行args的拼接
if (currArgs !== undefined) {
args = args.concat(currArgs);
}
// 递归调用
if (args.length < fn.length) {
return curry(fn, args);
}
// 递归出口
return fn.apply(null, args);
}
}
首先，它有 2 个参数，fn 指的就是源处理函数 ；currArgs 是调用 curry 时传入的参数列表，比如 (1)(3) 这样的。
再看到 curry 函数内部，它会整个返回一个匿名函数。
再接下来的 let args = [].slice.call(arguments);，意思是将 arguments 数组化。arguments 是一个类数组的结构，它并不是一个真的数组，所以没法使用数组的方法。我们用了 call 的方法，就能愉快地对 args 使用数组的原生方法了。
currArgs !== undefined 的判断，是为了解决递归调用时的参数拼接。
最后，判断 args 的个数，是否与 fn (也就是 sum )的参数个数相等，相等了就可以把参数都传给 fn，进行输出；否则，继续递归调用，直到两者相等。
function sum(a, b, c) {
console.log(a + b + c);
}
const fn = curry(sum);
fn(1, 2, 3); // 6
fn(1, 2)(3); // 6
fn(1)(2, 3); // 6
fn(1)(2)(3); // 6
四、总结
函数的柯里化，它返回的，是一个函数的函数。其实现方式，需要依赖参数以及递归，通过拆分参数的方式，来调用一个多参数的函数方法，以达到减少代码冗余，增加可读性的目的。
网友评论