理解函数柯里化(Function Currying ),最关键的是理解下面这个函数:
function curry(fn){
var args = Array.prototype.slice.call(arguments, 1);
return function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(null, finalArgs);
};
}
//这段代码来自:Professional JavaScript for Web Developers. Third Edition. page741 _
使用示例如下:
function add(num1, num2){
return num1 + num2;
}
var curriedAdd = curry(add, 5);
alert(curriedAdd(3)); //8
下面结合上述使用示例分析一下curry(fn)。
curry(fn)并不复杂,理解curry(fn)首先要知道 javascript 的函数是不会检查自身参数的(详见w3schools)。假如传入函数的参数数量比定义的多,多出来的参数会被忽略掉,不影响函数的执行。但这种忽略不是完全的忽略,这些多出来的参数仍然可以使用 arguments 对象来访问。
在上面的例子中,curry(fn)
只定义的一个参数,但在实际使用中var curriedAdd = curry(add, 5);
curry 被传入了 add 和 5 两个参数,其中 5 被选择性忽略。
- curry(fn)执行的第一行:
var args = Array.prototype.slice.call(arguments, 1);
就是获取第一个参数后的所有参数,在上述例子中就是[5]。 - 然后再将一个新的函数返回给curriedAdd ,此时curriedAdd 中的 args 和 fn 已经被赋值。
- 再调用curriedAdd(3)的时候,执行的结果如下:
innerArgs = [3]
finalArgs = [5, 3]
最后返回函数 add.apply(null, [5,3])
如果对原来的函数稍加修改,就可以很直观地看到 currying 的整个过程:
function newCurry(fn) {
var args = Array.prototype.slice.call(arguments, 1);
//
console.log('args=>'+args);
console.log('fn=>'+fn);
//
return function() {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
//
console.log('args=>'+args);
console.log('innerArgs=>'+innerArgs);
console.log('finalArgs=>'+finalArgs);
//
return fn.apply(null, finalArgs);
};
};
function add(num1, num2){
return num1 + num2;
}
var curriedAdd = newCurry(add, 5); // "args=>5"
// "fn=>function (num1, num2) {
// return num1+ num2;
// }"
alert(curriedAdd(3)); //"args=>5"
//"innerArgs=>3"
//"finalArgs=>5,3"
//8
几篇关于javascript function currying 的文章: