详解JS中的柯里化(currying)


Posted in Javascript onAugust 17, 2017

何为Curry化/柯里化?

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)

柯里化的作用

  • 延迟计算。上面的例子已经比较好低说明了。
  • 参数复用。当在多次调用同一个函数,并且传递的参数绝大多数是相同的,那么该函数可能是一个很好的柯里化候选。
  • 动态创建函数。

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

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

与 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();

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

实例

实例1:

var currying = function(fn) {
 // fn 指官员消化老婆的手段
 var args = [].slice.call(arguments, 1);
 // args 指的是那个合法老婆
 return function() {
  // 已经有的老婆和新搞定的老婆们合成一体,方便控制
  var newArgs = args.concat([].slice.call(arguments));
  // 这些老婆们用 fn 这个手段消化利用,完成韦小宝前辈的壮举并返回
  return fn.apply(null, newArgs);
 };
};
// 下为官员如何搞定7个老婆的测试
// 获得合法老婆
var getWife = currying(function() {
 var allWife = [].slice.call(arguments);
 // allwife 就是所有的老婆的,包括暗渡陈仓进来的老婆
 console.log(allWife.join(";"));
}, "合法老婆");
// 获得其他6个老婆
getWife("大老婆","小老婆","俏老婆","刁蛮老婆","乖老婆","送上门老婆");
// 换一批老婆
getWife("超越韦小宝的老婆");
 结果:
合法老婆;大老婆;小老婆;俏老婆;刁蛮老婆;乖老婆;送上门老婆
合法老婆;超越韦小宝的老婆
实例2:
var curryWeight = function(fn) {
 var _fishWeight = [];
 return function() {
  if (arguments.length === 0) {
   return fn.apply(null, _fishWeight);
  } else {
   _fishWeight = _fishWeight.concat([].slice.call(arguments));
  }
 }
};
var fishWeight = 0;
var addWeight = curryWeight(function() {
 var i=0; len = arguments.length;
 for (i; i<len; i+=1) {
  fishWeight += arguments[i];
 }
});
addWeight(2.3);
addWeight(6.5);
addWeight(1.2);
addWeight(2.5);
addWeight(); // 这里才计算
console.log(fishWeight); // 12.5

总结

以上所述是小编给大家介绍的JS中的函数柯里化(currying),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
javascript实现行拖动的方法
May 27 Javascript
js解决movebox移动问题
Mar 29 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
JavaScript实现简单评论功能
Aug 17 #Javascript
vue绑定class与行间样式style详解
Aug 16 #Javascript
Vue的MVVM实现方法
Aug 16 #Javascript
利用JS制作万年历的方法
Aug 16 #Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 #Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
前端必学之PHP语法基础
2016/01/01 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python实现自动上京东抢手机
2018/02/06 Python
python实现简易内存监控
2018/06/21 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
机关财务管理制度
2014/01/17 职场文书
财产公证书格式
2014/04/10 职场文书
2014中考励志标语
2014/06/05 职场文书
2016入党心得体会范文
2016/01/06 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫