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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
Cookie 小记
Apr 01 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
DedeCms模板安装/制作概述
2007/03/11 PHP
php error_log 函数的使用
2009/04/13 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Python外星人入侵游戏编程完整版
2020/03/30 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python定时任务 sched模块用法实例
2019/11/04 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
企业为何需要商业计划书
2013/12/26 职场文书
公司员工检讨书
2014/02/08 职场文书
阳光体育活动方案
2014/02/16 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
班子四风对照检查材料
2014/08/21 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
委托证明模板
2014/09/16 职场文书
总经理岗位职责范本
2015/04/01 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers