Javascript中currying的实现

简介:
Currying好像是函数式语言都有的一个特性,比如Perl,Python,Javascript。

那么到底什么是Currying,我是在学习Closure时无意中接触到这个定义的,觉得很是有趣。

先看看 Wiki 中的定义:

Currying is the technique of transforming a function that takes multiple arguments 

in such a way that it can be called as a chain of functions each with a single argument.

大概的意思就是说,将拥有多个参数的函数Currying化为拥有单一参数的函数形式。

下面举一个简单的例子说明Javascript中的Currying实现,一个简单的求和函数:

 

function  add(x, y) {
    
return  x  +  y;
}
console.log(
' add(2, 3) ==  '   +  add( 2 3 ));

 

对其进行Currying,及调用方法:

复制代码
function  curry_add(x) {
    
return   function (y) {
        
return  x  +  y;
    }
}
console.log(
' curry_add(2)(3) ==  '   +  curry_add( 2 )( 3 ));
复制代码

 


注意,curry_add(2) 返回的是函数。

 

我们还可以定义一个通用的 curry 函数:

 

复制代码
复制代码
function  curry(fn) {
    
var  args  =  [];
    
for  ( var  i  =   1 ; i  <  arguments.length; i ++ ) {
        args.push(arguments[i]);
    }
    
return   function () {
        
for  ( var  i   =   0 ; i  <  arguments.length; i ++ ) {
            args.push(arguments[i]);
        }
        
return  fn.apply(window, args);
    }
}
复制代码
复制代码

这个函数至少接收一个参数(需要curry的函数),对于前面的 add 函数,我们可以这样来调用:
console.log( ' curry(add)(2, 3) ==  '   +  curry(add)( 2 3 ));
console.log(
' curry(add, 2)(3) ==  '   +  curry(add,  2 )( 3 ));
console.log(
' curry(add, 2, 3)() ==  '   +  curry(add,  2 3 )());


因为 curry(add, 2) 或 curry(add) 返回的还是函数,所以我们还可以对其进行Currying,如下代码:

 

console.log( ' curry(curry(add), 2)(3) ==  '   +  curry(curry(add),  2 )( 3 ));
console.log(
' curry(curry(add, 2), 3)() == '   +  curry(curry(add,  2 ),  3 )());
 

 

运行时截图:

代码下载

 

[update_2009-2-17]

按照 @winter-cn 的提示,我来到另外一篇讨论Currying的 文章 ,发现那里的做法是写一个可以 Chain 的Currying,

另外我还发现了一个我以前不知道的特性,add.length 返回的是函数形式参数的个数,比如这个例子中的 add.length == 2

这就好办了,我们可以根据传递进来的参数的多少来判断是否返回执行结果或者是返回函数。

我大概的想法是要用到递归,来看看我的实现:

 

复制代码
复制代码
function  curry2(fn) {
    
var  args  =  [];
    
for   ( var  i  =   1 ; i  <  arguments.length; i ++ ) {
        args.push(arguments[i]);
    }
    
return   function () {
        
for  ( var  i  =   0 ; i  <  arguments.length; i ++ ) {
            args.push(arguments[i]);
        }
        
if  (args.length  >=  fn.length) {
            
return  fn.apply(window, args);
        }
        
else  {
            
return  curry2.apply(window, [fn].concat(args));
        }
    }
}
console.log(
' curry2(add)(2, 3) ==  '   +  curry2(add)( 2 3 ));
console.log(
' curry2(add)(2)(3) ==  '   +  curry2(add)( 2 )( 3 ));
复制代码
复制代码

 

当然这样的Currying技术,只能用在有明确形式参数的函数中,如果在add函数中使用arguments来捕获参数,则这种Currying是行不通的。

上面的add可能不是很明显,来看看拥有 4 个参数的add2函数,以及使用Currying技术:

 

复制代码
复制代码
function  add2(x, y, z, k) {
    
return  x  +  y  +  z  +  k;
}
console.log(
' curry2(add2)(1, 2, 3, 4) ==  '   +  curry2(add2)( 1 2 3 4 ));
console.log(
' curry2(add2)(1, 2, 3)(4) ==  '   +  curry2(add2)( 1 2 3 )( 4 ));
console.log(
' curry2(add2)(1, 2)(3, 4) ==  '   +  curry2(add2)( 1 2 )( 3 4 ));
console.log(
' curry2(add2)(1)(2, 3, 4) ==  '   +  curry2(add2)( 1 )( 2 3 4 ));
console.log(
' curry2(add2)(1)(2)(3, 4) ==  '   +  curry2(add2)( 1 )( 2 )( 3 4 ));
console.log(
' curry2(add2)(1)(2)(3)(4) ==  '   +  curry2(add2)( 1 )( 2 )( 3 )( 4 ));
复制代码
复制代码

 

 

更新的代码下载

 

附:John Resig在Pro Javascript一书中关于Currying的实现代码:

 

复制代码
复制代码
//  A function that generators a new function for adding numbers
function  addGenerator( num ) {

    
//  Return a simple function for adding two numbers
     //  with the first number borrowed from the generator
     return   function ( toAdd ) {
        
return  num  +  toAdd
    };

}

//  addFive now contains a function that takes one argument,
//
 adds five to it, and returns the resulting number
var  addFive  =  addGenerator(  5  );

//  We can see here that the result of the addFive function is 9,
//
 when passed an argument of 4
alert( addFive(  4  )  ==   9  );

复制代码
本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/archive/2012/06/30/2570783.html,如需转载请自行联系原作者
相关文章
|
10月前
|
JavaScript 前端开发 测试技术
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(二)
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(二)
|
10月前
|
自然语言处理 JavaScript 前端开发
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(一)
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(一)
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
167 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
219 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
153 0
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
365 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
270 1
|
算法 前端开发 JavaScript
【前端算法】用JS实现快速排序
理解数组方法里面运用到的算法,splice 和 slice的区别
112 0