通过实例了解Javascript柯里化流程


Posted in Javascript onMarch 03, 2020

函数式编程是一种如今比较流行的编程范式,它主张将函数作为参数进行传递,然后返回一个没有副作用的函数,说白了,就是希望一个函数只做一件事情。

像Javascript,Haskell,Clojure等编程语言都支持函数式编程。

这种编程思想涵盖了三个重要的概念:

  • 纯函数
  • 柯里化
  • 高阶函数

而这篇文章主要是想向大家讲清楚柯里化这个概念。

什么是柯里化

首先我们先来看一个例子:

function sum(a, b, c) {
 return a + b + c;
}
// 调用
sum(1, 2, 3); // 6

上述函数实现的是将a,b,c三个参数相加,改写为柯里化函数如下:

function sum(a) {
 return function (b) {
  return function(c) {
    return a + b + c;
    } 
  }
}
// 调用
let sum1 = sum(1);
let sum2 = sum1(2);
sum2(3); // 6

所谓柯里化就是把具有较多参数的函数转换成具有较少参数的函数的过程。

我们来一步步看上面那个柯里化函数做了什么,首先第一步调用了sum(1),此时变量sum1相当于:

sum1 = function(b) {
  return function(c) {
  // 注意此时变量a存在于闭包中,可以调用,a = 1
  return a + b + c;
 }
}

然后调用sum1(2),此时赋值给变量sum2相当于:

sum2 = function(c) {
 // 变量a,b皆在闭包中, a = 1, b = 2
 return a + b + c;
}

最后调用sum2(3),返回1 + 2 + 3的结果6;

这就是一个最简单的柯里化函数,是不是很简单呢?

柯里化函数的作用

那么问题来了,上面改写后的柯里化函数和原函数比起来代码多了不少,而且也不如原函数好理解,柯里化函数到底有什么用呢?

确实,柯里化函数在这里看起来的确是很臃肿,不实用,但在很多场景下他的作用是很大的,甚至很多人在不经意间已经在使用柯里化函数了。举一个简单的例子:

假设我们有一批的长方体,我们需要计算这些长方体的体积,实现一个如下函数:

function volume(length, width, height) {
  return length * width * height;
}
volume(200, 100, 200);
volume(200, 150, 100);
volume(200, 50, 80);
volume(100, 50, 60);

如上计算长方体的体积函数会发现存在很多相同长度的长方体,我们再用柯里化函数实现一下:

function volume(length, width, height) {
  return function(width) {
    return function(height) {
     return length * width * height;
      }
  }
}
let len200 = volume(200);
len200(100)(200);
len200(150)(100);
len200(50)(80);
volume(100)(50)(60);

如上,通过实现一个len200函数我们统一处理长度为200的长方体的体积,这就实现了参数复用。

我们再举一个只执行一次函数的例子:

function execOnce(fun) {
  let flag = true;
 return function() {
  if (flag) {
   fun && fun();
   flag = false;
  }
 }
}
let onceConsole = execOnce(function() {
  console.log('只打印一次');
});
onceConsole();
onceConsole();

如上,我们实现了一个execOnce函数,该函数接受一个函数参数,然后返回一个函数,变量flag存在闭包中,用来判断返回的函数是否执行过,onceConsole相当于:

let onceConsole = function() {
 if (flag) {
    (function() {
    console.log('只打印一次');
   })()
   flag = false;
  }
}

这也是柯里化函数的一个简单应用。

通用柯里化函数的实现

既然柯里化函数这么实用,那么我们能不能实现一个通用的柯里化函数呢?所谓通用,就是说该函数可以把函数参数转换为柯里化函数,看下第一版实现的代码:

// 第一版
var curry = function (fn) {
 var args = [].slice.call(arguments, 1);
 return function() {
  var newArgs = args.concat([].slice.call(arguments));
  return fn.apply(null, newArgs);
 };
};
 function add(a, b) {
  return a + b;
 }

var addFun = curry(add, 1, 2);
addFun() // 3
//或者
var addOne = curry(add, 1);

如上代码,我们接受一个函数作为参数,然后收集其它的参数,将这些参数传给这个函数参数去执行。但上面的代码有个问题,参数不够自由,比如我们想这么调用就会报错:

var addFun = curry(function(a, b,c) {
 return a + b + c;
}, 1);
addFun(2)(3); // 报错 addFun(...) is not a function

这好像违背了我们参数复用的原则,改进如下:

function curry(fn, args) {
 var length = fn.length;
 args = args || [];
 return function(...rest) {
  var _args = [...args, ...rest];
  return _args.length < length
   ? curry.call(this, fn, _args)
  : fn.apply(this, _args);
 }
}
var fn = curry(function(a, b, c) {
 console.log(a + b + c);
});
fn('a', 'b', 'c'); // abc
fn('a', 'b')('c'); // abc
fn('a')('b')('c'); // abc

如上实现就很完善,该工具函数的实现总结起来就一句话:

利用闭包将函数的参数储存起来,等参数达到一定数量时执行函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js有序数组的连接问题
Oct 01 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 #Javascript
Javascript作用域和作用域链原理解析
Mar 03 #Javascript
JS数组方法reduce的用法实例分析
Mar 03 #Javascript
Javascript模拟实现new原理解析
Mar 03 #Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 #Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 #Javascript
序列化模块json代码实例详解
Mar 03 #Javascript
You might like
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
使用python实现省市三级菜单效果
2016/01/20 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
浅析Python四种数据类型
2018/09/26 Python
python之信息加密题目详解
2019/06/26 Python
python pytest进阶之fixture详解
2019/06/27 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
《水乡歌》教学反思
2014/04/24 职场文书
安全宣传标语
2014/06/10 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
个人先进事迹材料
2014/12/29 职场文书
行政主管岗位职责
2015/02/03 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android