Javascript柯里化实现原理及作用解析


Posted in Javascript onOctober 22, 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的柯里化。

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

Javascript 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
Node.js fs模块原理及常见用途
Oct 22 #Javascript
使用vue构建多页面应用的示例
Oct 22 #Javascript
vue 单页应用和多页应用的优劣
Oct 22 #Javascript
Javascript Symbol原理及使用方法解析
Oct 22 #Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 #Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
You might like
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js 动态选中下拉框
2009/11/26 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python是什么 Python的用处
2020/05/26 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
护理实习自我鉴定
2013/12/14 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
法律七进实施方案
2014/03/15 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
文员岗位职责范本
2015/04/16 职场文书
班主任开场白
2015/06/01 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Python装饰器详细介绍
2022/03/25 Python