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,如需转载请自行联系原作者
相关文章
|
JavaScript 前端开发 测试技术
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(二)
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(二)
|
自然语言处理 JavaScript 前端开发
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(一)
【JavaScript】函数式编程:一文搞懂函数科里化(Currying)~(一)
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
356 1
|
存储 前端开发 算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
169 0
一行代码解决LeetCode实现 strStr()使用JavaScript解题|前端学算法
|
存储 机器学习/深度学习 JavaScript
JS 你最少用几行代码实现深拷贝?
JS 你最少用几行代码实现深拷贝?
JS 你最少用几行代码实现深拷贝?
|
JavaScript 前端开发 算法
JavaScript实现一段时间之后关闭广告
简介:通过JavaScript实现在一段时间之后,广告消失。
138 0
JavaScript实现一段时间之后关闭广告
|
JavaScript 前端开发 算法
JS实现鼠标悬停变色
本文实现的是利用JS实现当鼠标悬停在表格上的时候,表格发生变色。 CSS渲染 JS逻辑 `
225 0
JS实现鼠标悬停变色
|
JavaScript 前端开发 数据安全/隐私保护
JS实现关闭图片窗口
通过事件的绑定来实现,关闭二维码的效果。
165 0
JS实现关闭图片窗口
|
前端开发 JavaScript Windows
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
203 0
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
|
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;