零、资料
1. 详解JS函数柯里化 ；
2. 函数式编的JS: curry ；
一、基础概念
*上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
举例：
// 普通的add函数
function multiply(x, y) {
return x * y
}
// Currying 前的调用
multiply(3, 4) // 12
multiply(3, 5) // 15
multiply(3, 6) // 16
经过 Currying(伪) 后
function multiply(x) {
return function(y) {
return x * y
}
}
multiply(3)(4) // 12
实际上就是把add函数的x，y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了，就是只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。
二、优点
这里的优点以及代码基本搬运自资料 1 中内容。
1. 参数复用
// 正则验证字符串 reg.test(txt);
// 很符合我们写业务代码的习惯
function check(reg, txt) {
return reg.test(txt);
}
check(/\d+/g, ‘test‘) //false
check(/[a-z]+/g, ‘test‘) //true
// curry 后
function curringCheck(reg) {
return function(txt) {
return reg.test(txt)
}
}
// 中间函数， 预先设定规则
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)
// 这样，想做哪种检测，直接调用中间函数即可，不需要每次都传入规则
hasNumber(‘test1‘) // true
hasNumber(‘testtest‘) // false
hasLetter(‘21212‘) // false
// es 6 的简便写法, 这里先用稍微用下下面的内容
// 其中， fn 是待 Currying 的函数， curry 是工具函数
let curry = (fn) => (fArg) => (sArg) => fn(fArg, sArg);
2. 提前确认（这一条更多的是用到了闭包）
// 原代码
var on = function(element, event, handler) {
if (document.addEventListener) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
} else {
if (element && event && handler) {
element.attachEvent(‘on‘ + event, handler);
}
}
}
// 自执行函数形成闭包
var on = (function () {
if (document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
}
} else {
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent(‘on‘ + event, handler);
}
}
}
})();
// 换一种写法可能比较好理解一点，上面就是把isSupport这个参数给先确定下来了
var on = function(isSupport, element, event, handler) {
isSupport = isSupport || documnet.addEventListener;
if (isSupport) {
return element.addEventListener(event, handler, false);
} else {
return element.attachEvent(‘on‘ + event, handler);
}
}
3. 延迟运行(感觉也是闭包啊)
Function.prototype.bind = function(context) {
var _this = this;
var args = Array.prototype.slice.call(arguments, 1);
return functon() {
return _this.apply(context, args)
}
}
三、统一封装
1. 单层
var currying = function(fn) {
// 获取第一个方法内的全部参数
args = Array.prototype.slice.call(arguments, 1);
return function() {
// 将后面方法里的全部参数和 args 拼起来
var newArgs = args.concat(Array.prototype.slice.call(arguments));
return fn.apply(this, newArgs);
}
}
2. 多层 （递归，适合 fn(.)(.)(.)(.)... 的形式）
三层写法核心思路是一致的。// 写法 1, 支持多参数传递
function currying(fn, args) {
var _this = this;
var len = fn.length;
var args = args || [];
return function() {
var _args = Array.prototype.slice.call(arguments);
Array.prototype.push.apply(args, _args);
// 如果参数个数小于最初的fn.length，则递归调用，继续收集参数
if (_args.length < len) {
return currying.call(_this, fn, _args);
}
return fn.apply(this, _args);
}
}
// 写法 2
let currying = (fn, type = []) => {
let len = fn.length;
return function(...args) {
let concatValue = [...type, ...args];
if (concatValue.length < len) {
return currying(fn, concatValue);
} else {
return fn(...concatValue);
}
}
}
// 写法 3
// 多了层匿名函数， 用来搜集传入的参数
let curry = fn => {
let len = fn.length;
return function curriedFn(...args) {
if (args.length < len) {
return function () {
return curriedFn.apply(null, args.concat([].slice.call(arguments)));
}
}
return fn.apply(null, args);
}
}
四、缺陷
主要在性能上：
1. 由于使用了闭包， 闭包该有的问题一个不落地全部继承；
2.（如果有） 存取 arguments 对象通常要比存取命名参数要慢一点；
3.（如果有） 一些老版本的浏览器在 arguments.length 的实现上是相当地慢；
4.（如果有） 使用 fn.apply(...) 和 fn.call(...) 通常比直接调用 fn (...) 稍微慢一点；
不过相对于频繁的 DOM 操作， currying 到来的性能消耗可以忽略不计。
五、拓展与总结
currying 函数在设计上第一次调用必须传入一个函数，这是它的使用原则。
另外， 如果原函数的参数 > 2 （ fn(x, y, z, m, n, ...) ）的话， 多层写法中的 2 & 3 是支持 curry(fn)(x)(y, z)(m)(n)(...) 这种写法的。
下面这条题目作为拓展：
// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
function add() {
// 第一次执行时，定义一个数组专门用来存储所有的参数
var _args = Array.prototype.slice.call(arguments);
// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
var _adder = function() {
_args.push(...arguments);
return _adder;
};
// 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
_adder.toString = function () {
return _args.reduce(function (a, b) {
return a + b;
});
}
return _adder;
}
add(1)(2)(3) // 6
add(1, 2, 3)(4) // 10
add(1)(2)(3)(4)(5) // 15
add(2, 6)(1) // 9