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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈JS中的反柯里化( uncurrying)

    反柯里化 相反,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用. 即把如下给定的函数签名, obj.func(arg1, arg2) 转化成一个函数形式,签名如下: func(obj, arg1, arg2) 这就是 反柯里化的形式化描述. 例如,下面的一个简单实现: Function.prototype.uncurrying = function() { var that = this; return function() { return Func

  • JS中精巧的自动柯里化实现方法

    以下内容通过代码讲解和实例分析了JS中精巧的自动柯里化实现方法,并分析了柯里化函数的基础用法和知识,学习一下吧. 什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 Christopher Strachey 以逻辑学家 Haskell Curry 命名的,尽管它是 Moses Schnfinkel 和 Gottlob Frege 发明的. 理论看着头大?没

  • javascript实现函数柯里化与反柯里化过程解析

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术.其由数学家Haskell Brooks Curry提出,并以curry命名. 概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学

  • 深入解析JavaScript中函数的Currying柯里化

    引子 先来看一道小问题: 有人在群里出了到一道题目: var s = sum(1)(2)(3) ....... 最后 alert(s) 出来是6  var s = sum(1)(2)(3)(4) ....... 最后 alert(s) 出来是10  问sum怎么实现? 刚看到题目,我第一反应是sum返回的是一个function,但是没有最终实现,印象中看到过类似的原理,但是记不清了.   后来同事说,这个是叫柯里化, 实现方法比较巧妙: function sum(x){ var y = func

  • js函数柯里化的方法和作用实例分析

    本文实例讲述了js函数柯里化的方法和作用.分享给大家供大家参考,具体如下: 函数柯里化的方法: 1,利用数组的reduce方法可实现柯里化,具体参见我的另外一篇文章 2,代码如下 const curry = (fn, ...args) =>{ console.log('args',args) // console.log(fn.length,args.length) return args.length < fn.length // 参数长度不足时,重新柯里化该函数,等待接受新参数 ? (..

  • JavaScript函数柯里化详解

    什么是柯里化 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callba

  • JavaScript偏函数与柯里化实例详解

    本文实例讲述了JavaScript偏函数与柯里化.分享给大家供大家参考,具体如下: 到目前为止我们仅讨论绑定this,现在让我们更深入学习. 我们不仅能绑定this,也可以是参数,这较少使用,但有时很方便. bind完整的语法为: let bound = func.bind(context, arg1, arg2, ...); 可以绑定上下文this和函数的初始参数.举例,我们有个乘法函数mul(a,b): function mul(a, b) { return a * b; } 我们可以在该函

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

    函数式编程是一种如今比较流行的编程范式,它主张将函数作为参数进行传递,然后返回一个没有副作用的函数,说白了,就是希望一个函数只做一件事情. 像JavaScript,Haskell,Clojure等编程语言都支持函数式编程. 这种编程思想涵盖了三个重要的概念: 纯函数 柯里化 高阶函数 而这篇文章主要是想向大家讲清楚柯里化这个概念. 什么是柯里化 首先我们先来看一个例子: function sum(a, b, c) { return a + b + c; } // 调用 sum(1, 2, 3);

  • JavaScript函数柯里化实现原理及过程

    简介 当我们在读Vue源码到时候会发现,在它的 _update 实例中就用到了函数柯里化,(createPatchFunction方法)有兴趣的可以 去看一下. 柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术. 在<Mostly adequate guide>中,这样总结了 Currying --只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数. Currying 是函数式编

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

    函数式编程是一种如今比较流行的编程范式,它主张将函数作为参数进行传递,然后返回一个没有副作用的函数,说白了,就是希望一个函数只做一件事情. 像Javascript,Haskell,Clojure等编程语言都支持函数式编程. 这种编程思想涵盖了三个重要的概念: 纯函数 柯里化 高阶函数 而这篇文章主要是想向大家讲清楚柯里化这个概念. 什么是柯里化 首先我们先来看一个例子: function sum(a, b, c) { return a + b + c; } // 调用 sum(1, 2, 3);

  • JavaScript函数柯里化

    目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数# 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术以逻辑学家 Haskell Curry 命名的. 什么意思?简单来说,柯里化是一项技术,它用来改造多参数的函数. 比如: // 这是一个接受3个参数的函

  • 从柯里化分析JavaScript重要的高阶函数实例

    目录 前情回顾 百变柯里化 缓存传参 缓存判断 缓存计算 缓存函数 防抖与节流 lodash 高阶函数 结语 前情回顾 我们在前篇 <从历史讲起,JavaScript 基因里写着函数式编程> 讲到了 JavaScript 的函数式基因最早可追溯到 1930 年的 lambda 运算,这个时间比第一台计算机诞生的时间都还要早十几年.JavaScript 闭包的概念也来源于 lambda 运算中变量的被绑定关系. 因为在 lambda 演算的设定中,参数只能是一个,所以通过柯里化的天才想法来实现接

  • ES6如何用一句代码实现函数的柯里化

    柯里化是干什么的?首先看看下面这个函数 let store = (a,b,c) => "这是你的七仔面" //函数就好像一个小卖部,一碗七仔面要三张软妹币:a,b,c (五个参数) 那函数柯里化是什么?就是我们买面吃的过程可能是这样: let curryStore = curry(store) //刚刚的小卖部被柯里化了 //最佳状况 curryStore(1,5,1)// 老板,刚好!不用找了,刚好七块钱.老板: "这是你的七仔面" //偶尔出现的情况 le

  • JavaScript函数柯里化原理与用法分析

    JavaScript函数柯里化原理与用法分析

    本文实例讲述了JavaScript函数柯里化原理与用法.分享给大家供大家参考,具体如下: 柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数. 也就是说是固定部分参数,返回一个接受剩余参数的函数,也称为部分计算函数,目的是为了缩小适用范围,创建一个针对性更强的函数. 例如,我想创建一个做自我介绍的函数,每个人只要输入自己姓名.性别.年龄即可.但是当A使用这个函数时,每次调用,都必

  • javascript中利用柯里化函数实现bind方法

    柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @param con

随机推荐