JS - 函数柯里化

一、概念

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

简单来说，柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c)转换为可调用的 f(a)(b)(c)。

柯里化的3个常见作用：

参数复用
提前返回
延迟计算/运行

二、参数复用

参数复用可以用在各种需要正则检验的需求，比如校验电话号码、校验邮箱、校验身份证号、校验密码等。

这时我们会封装一个通用函数 checkByRegExp ,接收两个参数，校验的正则对象和待校验的字符串。

普通方法，如果需要多次校验那么就调用多次方法

function checkByRegExp(regExp,string) {return regExp.test(string);
}checkByRegExp(/^1\d{10}$/, '12345678900'); // 校验电话号码
checkByRegExp(/^1\d{10}$/, '12345678900');
checkByRegExp(/^1\d{10}$/, '12345678900');

柯里化写法

//进行柯里化
let _check = curry(checkByRegExp);
//生成工具函数，验证电话号码
let checkCellPhone = _check(/^1\d{10}$/);checkCellPhone('12345678900'); // 校验电话号码
checkCellPhone('12345678900'); // 校验电话号码
checkCellPhone('12345678900'); // 校验电话号码

可以借助柯里化对 checkByRegExp 函数进行封装，以简化代码书写，提高代码可读性。

三、提前返回

关于提前返回，这里引用一个网上流传的例子：

兼容现代浏览器以及IE浏览器的事件添加方法。以下是正常写法。

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 if …,如果使用柯里化，那么就只会在第一次的时候走 if…else if … ，即使之后再触发事件，也不会走条件判断。

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);});};}
})();

四、延迟计算

关于延迟计算，一般情况下，函数在传入参数之后，就会立即执行，柯里化的延迟计算，就是能让函数即使传入参数，也不会立即实行，而是将参数先存储在一个数组中，等到某个时机再调用数组，将之前的参数一起计算。

var curryWeight = function(fn) {var _selfWeight = [];return function() {if (arguments.length === 0) {return fn.apply(null, _selfWeight);} else {_selfWeight = _selfWeight.concat([].slice.call(arguments));}}
};
var selfWeight = 0;
var addWeight = curryWeight(function() {var i=0; len = arguments.length;for (i; i<len; i+=1) {selfWeight += arguments[i];}
});addWeight(2.3);
addWeight(6.5);
addWeight(1.2);
addWeight(2.5);
addWeight();    //  这里才计算console.log(selfWeight);    // 12.5

五、实现柯里化函数

实现柯里化函数可以通过函数的 length 属性，获取函数的形参个数，形参的个数就是所需的参数个数。

function curry(func) {return function curried(...args) {if (args.length >= func.length) {return func.apply(this, args);} else {return function(...args2) {return curried.apply(this, args.concat(args2));}}};}function sum(a, b, c) {return a + b + c;
}let curriedSum = curry(sum);alert( curriedSum(1, 2, 3) ); // 6，仍然可以被正常调用
alert( curriedSum(1)(2,3) ); // 6，对第一个参数的柯里化
alert( curriedSum(1)(2)(3) ); // 6，全柯里化

六、柯里化面试题

这里再讲以下，网上的那一道和柯里化相关的面试题，以及一个关于函数内置的toString函数的知识点。

写一个函数实现
add(1)(2)(3)  // 6// 实现方法var add = function(a) {return function(b) {return funciton(c) {return a+b+c;}}}add(1)(2)(3);

上面这种写法是最简单的实现方法，但是缺点显而易见，只能实现单一一种情况，如果传入的参数不定，那么就无法使用这种方法，这里附上一种写法，可以适应多个参数的情况。

var add = function(a) {var sum = a;var addMore = function(b) {sum += b;return addMore;};addMore.toString = function() {return sum;};return addMore;
};
var a = add(1)(2)(3)(4).toString();  //10

这里需要提一下，如果是单纯的，
var a = add(1)(2)(3)(4)；
这样输出的是一个函数式

{ [Function: addMore] toString: [Function] }

必须得转化以下，才能够输出数字。另外，还有一种情况：

var add = function(a) {var sum = a;var addMore = function(b) {sum += b;return addMore;};addMore.toString = function() {return sum;};return addMore;
};
var a = add(1)(2)(3)(4)+10;  //20

这是由于函数的隐式转换。当我们直接将函数参与其他的计算时，函数会默认调用toString方法，直接将函数体转换为字符串参与计算。
但是，使用函数内置的 toString()函数输出的是一个函数体字符串。例子如下，

function b() {return 10;
}
var c = b+10;
console.log(c);
console.log(typeof(c));
// 输出
function b() {return 10;
}10
string

所以，必须使用自定义的 toString 是函数返回我们想要的值。
也就是说，当没有定义toString时，函数的隐式转换会调用默认的toString方法，它会将函数的定义内容作为字符串返回。

而当我们自定义了toString方法时，那么隐式转换的返回结果则由我们自己控制了。

另外，vauleOf 的方法的作用和 toString 方法一样，但是valueOf会比toString后执行。

还有一个注意的点，

add (2,3) arguments.length == 2
add (2)(3) arguments.length == 1

柯里化面试题还有另一种形式

var a = add(1)(2)(3)(4);   //10
var b = add(1, 2, 3, 4);   //10
var c = add(1, 2)(3, 4);   //10
var d = add(1, 2, 3)(4);   //10// 实现方法
function add() {var _args = [].slice.call(arguments);var adder = function () {var _adder = function() {_args.push(...arguments);return _adder;};_adder.toString = function () {return _args.reduce(function (a, b) {return a + b;});}return _adder;}return adder(..._args);
}var a = add(1)(2)(3)(4,5).toString();
console.log(a); // 10

参考链接：
前端基础进阶（十）：深入详解函数的柯里化
「前端进阶」彻底弄懂函数柯里化
柯里化（Currying）