深入剖析JavaScript中的函数currying柯里化


Posted in Javascript onApril 29, 2016

curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名)。
 
柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果。

因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程。 

柯里化一个求和函数
按照分步求值,我们看一个简单的例子

var concat3Words = function (a, b, c) { 
  return a+b+c; 
}; 
 
var concat3WordsCurrying = function(a) { 
  return function (b) { 
    return function (c) { 
      return a+b+c; 
    }; 
  }; 
}; 
console.log(concat3Words("foo ","bar ","baza"));      // foo bar baza 
console.log(concat3WordsCurrying("foo "));         // [Function] 
console.log(concat3WordsCurrying("foo ")("bar ")("baza")); // foo bar baza

可以看到, concat3WordsCurrying("foo ") 是一个 Function,每次调用都返回一个新的函数,该函数接受另一个调用,然后又返回一个新的函数,直至最后返回结果,分布求解,层层递进。(PS:这里利用了闭包的特点) 
 

那么现在我们更进一步,如果要求可传递的参数不止3个,可以传任意多个参数,当不传参数时输出结果? 

首先来个普通的实现:

var add = function(items){ 
  return items.reduce(function(a,b){ 
    return a+b 
  }); 
}; 
console.log(add([1,2,3,4]));

但如果要求把每个数乘以10之后再相加,那么:

var add = function (items,multi) { 
  return items.map(function (item) { 
    return item*multi; 
  }).reduce(function (a, b) { 
    return a + b 
  }); 
}; 
console.log(add([1, 2, 3, 4],10));

好在有 map 和 reduce 函数,假如按照这个模式,现在要把每项加1,再汇总,那么我们需要更换map中的函数。 

下面看一下柯里化实现:

var adder = function () { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return _args.reduce(function (a, b) { 
        return a + b; 
      }); 
    } 
    [].push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
};   
var sum = adder(); 
 
console.log(sum);   // Function 
 
sum(100,200)(300);  // 调用形式灵活,一次调用可输入一个或者多个参数,并且支持链式调用 
sum(400); 
console.log(sum());  // 1000 (加总计算)

上面 adder是柯里化了的函数,它返回一个新的函数,新的函数接收可分批次接受新的参数,延迟到最后一次计算。 
 

通用的柯里化函数

更典型的柯里化会把最后一次的计算封装进一个函数中,再把这个函数作为参数传入柯里化函数,这样即清晰,又灵活。

例如 每项乘以10, 我们可以把处理函数作为参数传入:

var currying = function (fn) { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return fn.apply(this, _args); 
    } 
    Array.prototype.push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
}; 
 
var multi=function () { 
  var total = 0; 
  for (var i = 0, c; c = arguments[i++];) { 
    total += c; 
  } 
  return total; 
}; 
 
var sum = currying(multi);  
  
sum(100,200)(300); 
sum(400); 
console.log(sum());   // 1000 (空白调用时才真正计算)

这样 sum = currying(multi),调用非常清晰,使用效果也堪称绚丽,例如要累加多个值,可以把多个值作为做个参数 sum(1,2,3),也可以支持链式的调用,sum(1)(2)(3)
 
柯里化的基础

上面的代码其实是一个高阶函数(high-order function), 高阶函数是指操作函数的函数,它接收一个或者多个函数作为参数,并返回一个新函数。此外,还依赖与闭包的特性,来保存中间过程中输入的参数。即:
 
函数可以作为参数传递
函数能够作为函数的返回值
闭包
柯里化的作用
延迟计算。上面的例子已经比较好低说明了。

参数复用。当在多次调用同一个函数,并且传递的参数绝大多数是相同的,那么该函数可能是一个很好的柯里化候选。

动态创建函数。这可以是在部分计算出结果后,在此基础上动态生成新的函数处理后面的业务,这样省略了重复计算。或者可以通过将要传入调用函数的参数子集,部分应用到函数中,从而动态创造出一个新函数,这个新函数保存了重复传入的参数(以后不必每次都传)。例如,事件浏览器添加事件的辅助方法:

var addEvent = function(el, type, fn, capture) { 
   if (window.addEventListener) { 
     el.addEventListener(type, function(e) { 
       fn.call(el, e); 
     }, capture); 
   } else if (window.attachEvent) { 
     el.attachEvent("on" + type, function(e) { 
       fn.call(el, e); 
     }); 
   } 
 };

每次添加事件处理都要执行一遍 if...else...,其实在一个浏览器中只要一次判定就可以了,把根据一次判定之后的结果动态生成新的函数,以后就不必重新计算。

var addEvent = (function(){ 
  if (window.addEventListener) { 
    return function(el, sType, fn, capture) { 
      el.addEventListener(sType, function(e) { 
        fn.call(el, e); 
      }, (capture)); 
    }; 
  } else if (window.attachEvent) { 
    return function(el, sType, fn, capture) { 
      el.attachEvent("on" + sType, function(e) { 
        fn.call(el, e); 
      }); 
    }; 
  } 
})();

这个例子,第一次 if...else... 判断之后,完成了部分计算,动态创建新的函数来处理后面传入的参数,这是一个典型的柯里化。
 
Function.prototype.bind 方法也是柯里化应用

与 call/apply 方法直接执行不同,bind 方法 将第一个参数设置为函数执行的上下文,其他参数依次传递给调用方法(函数的主体本身不执行,可以看成是延迟执行),并动态创建返回一个新的函数, 这符合柯里化特点。

var foo = {x: 888}; 
var bar = function () { 
  console.log(this.x); 
}.bind(foo);        // 绑定 
bar();           // 888

下面是一个 bind 函数的模拟,testBind 创建并返回新的函数,在新的函数中将真正要执行业务的函数绑定到实参传入的上下文,延迟执行了。

Function.prototype.testBind = function (scope) { 
  var fn = this;          //// this 指向的是调用 testBind 方法的一个函数, 
  return function () { 
    return fn.apply(scope); 
  } 
}; 
var testBindBar = bar.testBind(foo); // 绑定 foo,延迟执行 
console.log(testBindBar);       // Function (可见,bind之后返回的是一个延迟执行的新函数) 
testBindBar();            // 888

这里要注意 prototype 中 this 的理解。

以上这篇深入剖析JavaScript中的函数currying 柯里化就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的listview效果
Apr 28 Javascript
不安全的常用的js写法
Sep 15 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 #Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 #Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 #Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 #Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 #Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 #Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
利用python发送和接收邮件
2016/09/27 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python 中xpath爬虫实例详解
2019/08/26 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
大学生毕业自我鉴定
2013/11/06 职场文书
大学校庆策划书
2014/01/31 职场文书
弄虚作假心得体会
2014/09/10 职场文书
律政俏佳人观后感
2015/06/09 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python实现简单倒计时功能
2021/04/21 Python
Python机器学习之逻辑回归
2021/05/11 Python
Redis性能监控的实现
2021/07/09 Redis
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android