通过实例了解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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
微信小程序倒计时功能实现代码
Nov 09 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
Node.JS如何实现JWT原理
Sep 18 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 Mysql编程之高级技巧
2008/08/27 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
浅谈Python中的数据类型
2015/05/05 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python代码太长换行的实现
2019/07/05 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
办公室打字员岗位职责
2014/04/16 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
教师群众路线心得体会
2014/11/04 职场文书
电视新闻稿
2015/07/17 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS