前言

本文1454字,阅读大约需要4分钟。

总括: 本文以初学者的角度来阐述Javascript中柯里化的概念以及如何在工作中进行使用。

事亲以敬,美过三牲。

正文

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

像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的柯里化。

能力有限,水平一般,欢迎勘误,不胜感激。


订阅更多文章可关注「菜鸟学前端」,回复「666」,获取一揽子前端技术书籍

  • 回复「666」,可领取一揽子前端技术书籍;

理解Javascript的柯里化的更多相关文章

  1. JavaScript函数柯里化

    函数式 JavaScript是以函数为一等公民的函数式语言.函数在JavaScript中也是一个对象(继承制Function),函数也可以作为参数传递成函数变量.最近几年函数式也因为其无副作用的特性. ...

  2. JavaScript 反柯里化

    浅析 JavaScript 中的 函数 uncurrying 反柯里化 柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间 ...

  3. JavaScript的柯里化函数

    柯里化,或者说部分应用,是一种函数式编程的技术,对于熟悉以传统方式编写 JavaScript 代码的人来说可能会很费解.但如果使用得当,它可以使你的 JavaScript 函数更具可读性. 更具可读性 ...

  4. Javascript函数柯里化(curry)

    函数柯里化currying,是函数式编程非常重要的一个标志.它的实现需要满足以下条件,首先就是函数可以作为参数进行传递,然后就是函数可以作为返回值return出去.我们依靠这个特性编写很多优雅酷炫的代 ...

  5. JavaScript函数柯里化的一些思考

    1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函 ...

  6. JavaScript之柯里化

    //未柯里化 function add(a,b){ return a + b; } //柯里化 function add(y){ return function(x){ console.log(y + ...

  7. javascript函数柯里化初探

    // 柯里化之前 function add(x,y,z){ return x+y+z; } add(1,2,3) // 6 // 柯里化之后 function curryAdd(x){ return ...

  8. javascript curry 柯里化函数 仿lodash的curry

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS 函数的柯里化与反柯里化

    ===================================== 函数的柯里化与反柯里化 ===================================== [这是一篇比较久之前的总 ...

随机推荐

  1. redis的事务操作

    事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命令请求所打断. 事务是一个原子操作:事务中的命令要么全部被执行,要么全部都不执行. 一 ...

  2. centos curl命令post携带body json数据

    1,接口链接 https://xxx.com/xqAppServer/api/APPBizRest/idfaDuplicateRemove/v1/?sysIdfa=661743D1-A76E-498A ...

  3. 网络状态诊断工具——netstat命令

    netstat命令可以用来查询整个系统的网络状态.百度百科的定义如下: Netstat的定义是: Netstat是在内核中访问网络连接状态及其相关信息的程序,它能提供TCP连接,TCP和UDP监听,进 ...

  4. $AT2292\ Division\ into\ Two$ $dp$

    正解:$dp$ 解题报告: 传送门$QwQ$ 不妨令$A\geq B$,于是先$sort$然后预处理判下如果有三个元素两两差都小于$B$的就直接$GG$了. 然后考虑对集合$X$进行$dp$,剩下的数 ...

  5. Jmeter-Ant 生成测试报告配置步骤

    1.配置java环境变量(不会的可以自行百度) 2.安装jmeter 3.安装ant,配置ant环境变量 4.将JMeter所在目录下extras子目录里的ant-JMeter-1.1.1.jar复制 ...

  6. 你的IDEA过期了?跃哥四大招帮你稳住

    作者:Dimple Solgan:当你的才华还无法撑起你的野心时候,那应该静下心来好好学习 前天晚上在群里风风火火组建了两个学习小组,一个是面向Java初学,一个是面向Python初学,把我搞的兴奋不 ...

  7. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

  8. [JavaScript设计模式]惰性单例模式

    惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...

  9. DHCP服务器搭建

    一.服务端安装配置 1.安装dhcp相关软件包 执行命令:yum install dhcp dhcp-devel -y #通过yum安装dhcp软件包 2.编辑配置dhcp的配置文件,文件路径:/et ...

  10. 开源项目SMSS开源项目(三)——protobuf协议设计

    本文的第一部分将介绍protobuf使用基础以及如何利用protobuf设计通信协议.第二部分会给出smss项目的协议设计规范和源码讲解. 一.Protobuf使用基础 什么是protobuf pro ...