之前写过一个函数Curry化的小文章

那会儿对Curry化的理解不够深,平时遇到的需要Curry化的例子也比较少,今天,重新整理这个问题

函数Curry化,其实就是将一个参数非常多的函数,在大多数参数都相同的情况下,生成一个新的参数比较少的函数的过程

但是,有一个无法解决的问题,至少我不知道该怎么办,就是只能按顺序去省略参数

上代码,先从简单的例子说起

function add( a , b , c){
    return a + b + c;
}

该方法可以计算三个数的合.

add(1,2,3);

add(1,2,4);

add(1,2,5);

....

遇到这种情况,总是写重复的参数,会不会觉得烦?不会?那看看下面的代码

function getPosition( iWidth , iHeight , iMarginBottom , iMarginRight , /* 一共有几列 */iColNum , iIndex ){
    return {
        left : iIndex % iColNum * ( iMarginRight + iWidth ),
        top : Math.floor( iIndex / iColNum ) * ( iMarginBottom + iHeight )
    }
}

假如现在需要实现一个发牌的效果,需要将每个元素都用绝对定位放到指定的位置上.

像这样.通过这个方法,只要将每个方块的各个属性和方块的索引index传递到getPosition方法里,就可以获取它应在的位置的坐标

假如现在有了一个新功能,通过点击某个按钮,可以让他们按照倒序排列

假如现在又有了一个新功能,通过点击某个按钮,可以增加新的方块

假如...

好吧,看来,getPosition()方法里的前五个参数,恐怕要多填几次了.

这时候,如果使用函数Curry化,就可以让代码看起来更清楚了,

继续使用add方法做说明,并且,将三个数相加减少到两个,

然后演示下函数Curry化的过程

代码如下:

function add( a , b ){
    if( typeof b == "undefined" ){
        return function (b){
            return a + b;
        }
    }
}

使用方法:

var add3 = add(3)
alert( add3(4) )

上面的add方法中,返回了一个闭包,将第一参数a保存在了这个闭包中,同时接收一个新的参数b

这样,当我们需要大量使用add(3,??)的时候,就可以使用新的函数add3()来进行计算了.

但是,每次都这样去写,是得不偿失的,尤其是到了参数真的多起来的时候,更是愚蠢,因此,需要封装一个方法,实现Curry化

首先,需要补充点小知识点

1.function里的argumens,并不是一个真正的数组

2.arrObject.slice(start,/*optional*/end) 方法, 可以返回一个数组里[start,end)部分的元素,当只填写了start参数时,会获取从start开始一直到结尾的元素,这个方法不会改变原来的数组

3.Array.prototype.slice  可以将arguments转化为一个真正的数组.

知识点3的测试代码如下

var mySlice = Array.prototype.slice;function test(a,b,c,d){
    //通过mySlice可以将arguments转换为一个真正的数组
    console.dir(mySlice.call(arguments))
}
test(1,2,3,4)

控制台显示Array[4];

最终函数Curry化代码如下

function curry(fn/*,arg1,arg2,arg3,......*/){
    var mySlice = Array.prototype.slice;
    var save_args = mySlice.call(arguments,1)
    return function (){
        var newArgs = mySlice.call(arguments);
        var args = save_args.concat(newArgs);
        return fn.apply(null,args)
    }
}

从原理到中间利用的知识点,已经说的比较清楚了,不再赘述.

附加测试代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
li{ position:absolute; width:100px; height:100px; background-color:#000;}
</style>
<script>
function getPosition( iWidth , iHeight , iMarginBottom , iMarginRight , /* 一共有几列 */iColNum , iIndex ){
    return {
        left : iIndex % iColNum * ( iMarginRight + iWidth ),
        top : Math.floor( iIndex / iColNum ) * ( iMarginBottom + iHeight )
    }
}
function curry(fn/*,arg1,arg2,arg3,......*/){
    var mySlice = Array.prototype.slice;
    var save_args = mySlice.call(arguments,1)
    return function (){
        var newArgs = mySlice.call(arguments);
        var args = save_args.concat(newArgs);
        return fn.apply(null,args)
    }
}
window.onload = function (){
    var oUl = document.getElementById("ul");
    var aLis = oUl.getElementsByTagName("li");

    var iWidth = 100;
    var iHeight = 100;
    var iMargin = 10;

    var iColNum = 3;

    var newGetPosition = curry( getPosition , iWidth , iHeight , iMargin , iMargin , iColNum );

    for( var i=0; i<aLis.length; i++ ){
        //var p = getPosition( iWidth , iHeight , iMargin , iMargin , iColNum , i )
        var p = newGetPosition(i)
        aLis[i].style.top = p.top + "px";
        aLis[i].style.left = p.left + "px";
    }
}
</script>

</head>

<body>
<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

到这里了,睡觉去zzzZZZZ....

函数Curry化的更多相关文章

  1. 转:python中函数curry化

    1 柯里化(Currying) 一个函数有多个参数,我们希望能固定其中几个参数的值. from functools import partial def foo(a,b,c): return a+b+ ...

  2. Curry化函数

    <script> function fn(){ var i, rult = 0, len = arguments.length; for (i=0;i<len ;i++ ) { ru ...

  3. ♫【模式】Curry化

    /** * 当发现正在调用同一个函数,并且传递的参数绝大多数都是相同的, * 那么该函数可能是用于Curry化的一个很好的候选参数 */ ;(function() { function add(x, ...

  4. scala学习手记25 - Curry化

    curry翻译为中文就是咖喱.意为使用curry可以让代码更有味道. scala里的curry化可以把函数从接收多个参数转换成接收多个参数列表.也就是说我们要编写的函数不是只有一个参数列表,这个参数列 ...

  5. React 应用设计之道 - curry 化妙用

    使用 React 开发应用,给予了前端工程师无限"组合拼装"快感.但在此基础上,组件如何划分,数据如何流转等应用设计都决定了代码层面的美感和强健性. 同时,在 React 世界里提 ...

  6. JavaScript基础Curry化(021)

    时候我们希望函数可以分步接受参数,并在所有参数都到位后得到执行结果.为了实现这种机制,我们先了解函数在Javascript中的应用过程: 1. 函数的“应用”(Function Application ...

  7. (MTT)连续能量函数最小化方法

    (MTT)连续能量函数最小化方法 Multitarget tracking Multi-object tracking 连续能量函数 读"A.Milan,S. Roth, K. Schind ...

  8. Scalaz（3）－ 基础篇：函数概括化－Generalizing Functions

    Scalaz是个通用的函数式编程组件库.它提供的类型.函数组件都必须具有高度的概括性才能同时支持不同数据类型的操作.可以说,scalaz提供了一整套所有编程人员都需要的具有高度概括性的通用函数,它是通 ...

  9. vue render函数 函数组件化

    之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...

随机推荐

  1. javascript基础04

    javascript基础04 1.循环语句 1.While 语句: while (exp) { //statements; } var i = 1; while(i < 3){ alert(i) ...

  2. jquery写简单的div切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. java类读取properties文件

    package com.bshinfo.el.userInfo.util; import java.io.BufferedReader;import java.io.File;import java. ...

  4. 如何破解mac版UltraEdit？

    Rodolfo教你如何破解UtralEdit? 第一步:去官网下载原载,先运行一次: 第二步:在终端里执行下面代码就可以破解完成!printf '\x31\xC0\xFF\xC0\xC3\x90' | ...

  5. php 二维数组按某字段排序

    思路很重要,最好的方法是查询时按这个字段给你排好,把问题丢给数据库,比如  order by age ,如果遇到中文时需要这样写(mysql) 如:select * from category ord ...

  6. js学习笔记---事件代理

    事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...

  7. 几年前做家教写的C教程（之四专讲了指针与汉诺塔问题）

    C语言学习宝典(4) 指针:可以有效的表示复杂的数据结构,能动态的分配动态空间,方便的使用字符串,有效的使用数组,能直接处理内存单元 不掌握指针就没有掌握C语言的精华 地址:系统为每一个变量分配一个内 ...

  8. 【Java EE 学习 15】【自定义数据库连接池之动态代理的使用】

    一.动态代理的作用 使用动态代理可以拦截一个对象某个方法的执行,并执行自定义的方法,其本质是反射 优点:灵活 缺点:由于其本质是反射,所以执行速度相对要慢一些 二.数据库连接池设计思想 1.为什么要使 ...

  9. scala中的面向对象定义类，构造函数，继承

    我们知道scala中一切皆为对象,函数也是对象,数字也是对象,它是一个比java还要面向对象的语言. 定义scala的简单类 class Point (val x:Int, val y:Int) 上面 ...

  10. JAVA基础再回首

    http://blog.csdn.net/m366917/article/details/51559031