JavaScript中怎么实现柯里化函数

本篇文章为大家展示了JavaScript 中怎么实现柯里化函数，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司主要从事成都做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务保山,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

阶段1

现在有一个加法函数：

function add(x, y, z) {    return x + y + z}

调用方式是 add(1, 2, 3)。

如果执行柯里化，变成了 curriedAdd()，从效果来说，大致就是变成 curriedAdd(1)(2)(3) 这样子。

现在先不看怎么对原函数执行柯里化，而是根据这个调用方式重新写一个函数。代码可能是这样的：

function curriedAdd1(x) {    return function (y) {        return function (z) {            return x + y + z       }    }}

阶段2

假如现在想要升级一下，不止可以接受三个参数。可以使用 arguments，或者使用展开运算符来处理传入的参数。

但是有一个衍生的问题。因为之前每次只能传递一个，总共只能传递三个，才保证了调用三次之后参数个数刚好足够，函数才能执行。

既然我们打算修改为可以接受任意个数的参数，那么就要规定一个终点。比如说，可以规定为当不再传入参数的时候，就执行函数。

下面是使用 arguments 的实现。

function getCurriedAdd() {    // 在外部维护一个数组保存传递的变量    let args_arr = []    // 返回一个闭包    let closure = function () {       // 本次调用传入的参数        let args = Array.prototype.slice.call(arguments)        // 如果传进了新的参数       if (args.length > 0) {            // 保存参数           args_arr = args_arr.concat(args)            // 再次返回闭包，等待下次调用            // 也可以 return arguments.callee            return closure          }    // 没有传递参数，执行累加    return args_arr.reduce((total, current) => total + current)  }  return closure}curriedAdd = getCurriedAdd()curriedAdd(1)(2)(3)(4)()复制代码

阶段3

这时可以发现，上面的整个函数里，与函数具体功能（在这里就是执行加法）有关的，就只是当没有传递参数时的部分，其他部分都是在实现怎样多次接收参数。

那么，只要让 getCurriedAdd 接受一个函数作为参数，把没有传递参数时的那一行代码替换一下，就可以实现一个通用的柯里化函数了。

把上面的修改一下，实现一个通用柯里化函数，并把一个阶乘函数柯里化：

function currying(fn) {    let args_arr = []    let closure =  function (...args) {        if (args.length > 0) {            args_arr = args_arr.concat(args)            return closure       }        // 没有新的参数，执行函数        return fn(...args_arr)   }    return closure}function multiply(...args) {   return args.reduce((total, current) => total * current)}curriedMultiply = currying(multiply)console.log(curriedMultiply(2)(3, 4)()

阶段4

上面的代码里，对于函数执行时机的判断，是根据是否有参数传入。但是更多时候，更合理的依据是原函数可以接受的参数的总数。

函数名的 length 属性就是该函数接受的参数个数。比如：

function test1(a, b) {}function test2(...args){}console.log(test1.length) // 2console.log(test2.length) // 0

改写一下：

function currying(fn) {    let args_arr = [],       max_length = fn.length  let closure = function (...args) {    // 先把参数加进去    args_arr = args_arr.concat(args)    // 如果参数没满，返回闭包等待下一次调用    if (args_arr.length < max_length) return closure    // 传递完成，执行    return fn(...args_arr)  }  return closure}function add(x, y, z) {  return x + y + z}curriedAdd = currying(add)console.log(curriedAdd(1, 2)(3))复制代码

Lodash 中的柯里化

让我们先看一下 lodash.js 的文档，看看一个真正的 curry 方法到底是做什么的。

var abc = function(a, b, c) { return [a, b, c];};var curried = _.curry(abc);curried(1)(2)(3); // => [1, 2, 3]curried(1, 2)(3); // => [1, 2, 3]curried(1, 2, 3); // => [1, 2, 3]// Curried with placeholders.curried(1)(_, 3)(2); // => [1, 2, 3]

在我理解看来，curry 能够让我们：

1. 在多个函数调用中逐步收集参数，不用在一个函数调用中一次收集。

2. 当收集到足够的参数时，返回函数执行结果。

为了更好的理解它，我在网上找了多个实现示例。然而，我希望是有一个非常简单的教程从一个基本的例子开始，就像下面这个一样，而不是直接从最终的实现开始。

var fn = function() {  console.log(arguments);  return fn.bind(null, ...arguments);  // 如果没有es6的话我们可以这样写：  // return Function.prototype.bind.apply(fn, [null].concat(  //   Array.prototype.slice.call(arguments)  // ));}fb = fn(1); //[1]fb = fb(2); //[1, 2]fb = fb(3); //[1, 2, 3]fb = fb(4); //[1, 2, 3, 4]

理解 fn 函数是所有的起点。基本上，这个函数的作用就是一个“参数收集器”。每次调用该函数时，它都会返回一个自身的绑定函数（fb），并且将该函数提供的“参数”绑定到返回函数上。该“参数”将位于之后调用返回的绑定函数时提供的任何参数之前。因此，每个调用中传的参数将被逐渐收集到一个数组当中。

当然，就像 curry 函数一样，我们不必一直收集下去。现在我们可以先写死一个终止点。

var numOfRequiredArguments = 5;var fn = function() {  if (arguments.length < numOfRequiredArguments) {    return fn.bind(null, ...arguments);  } else {    console.log('we already collect 5 arguments: ', [...arguments]);    return null;  }}

为了让它表现得和 curry 方法一样，需要解决两个问题：

1. 我们希望将收集到的参数传递给需要它们的目标函数，而不是通过将它们传递给 console.log 在最后打印出来。

2. 变量 numOfRequiredArguments 不应该是写死的，它应该是目标函数所期望的参数个数。

幸运的是，JavaScript函数确实带有一个名为 “length” 的属性，它指定了函数所期望的参数个数。因此，我们就可以使用这个属性来确定所需要的参数个数，而不用再写死了。那么第二个问题就解决了。

那第一个问题呢：保持对目标函数的引用？

网上有几个例子可以解决这个问题。它们之间虽然略有不同，但是有着相同的思路：除去存储参数以外，我们还需要在某处存储对于目标函数的引用。

这里我把它们分为两种不同的方法，它们之间或多或少都有相似之处，理解它们能够帮助我们更好地理解背后的逻辑。顺便说一句，这里我将这个函数叫做 magician，以代替 curry。

方法1

function magician(targetfn) {  var numOfArgs = targetfn.length;  return function fn() {    if (arguments.length < numOfArgs) {      return fn.bind(null, ...arguments);    } else {      return targetfn.apply(null, arguments);    }  }}

magician 函数的作用是：它接收目标函数作为参数，然后返回‘参数收集器’函数，与上例中 fn 函数作用相同。唯一的不同点在于，当收集的参数数量与目标函数所必需的参数数量相等时，它将把收集到的参数通过 apply 方法给到该目标函数，并返回计算的结果。这个方法通过将其存储在 magician 创建的闭包当中来解决第一个问题（引用目标函数）。

方法2

这个方法更进一步，由于参数收集器函数只是一个普通函数，那为什么不使用 magician 函数本身作为参数收集器呢？

function magician (targetfn) {  var numOfArgs = targetfn.length;  if (arguments.length - 1 < numOfArgs) {    return magician.bind(null, ...arguments);  } else {    return targetfn.apply(null, Array.prototype.slice.call(arguments, 1));  }}

注意方法2中的一个不同。因为 magician 接收目标函数作为它的第一个参数，因此收集到的参数将始终包含该函数作为 arguments[0]。这就导致，我们在检查有效参数的总数时，需要减去第一个参数。

顺便说一句，因为目标函数是递归地传递给 magician 函数的，所以我们可以通过传入第一个参数显式地引用目标函数，以代替使用闭包来存储目标函数的引用。

正如你所见，Eric Elliott 上面使用到的 “curry” 函数和方法1功能相似，但实际上它是一个偏函数（这又是另外一说了）。

const curry = fn => (…args) => fn.bind(null, …args);

上面是一个 curry 函数，它返回“参数收集器”，该收集器只收集一次参数，并返回绑定的目标函数。

更进一步

上面的‘magician’函数仍然没有lodash.js中的‘curry’函数那样神奇。lodash的curry允许使用‘_’作为输入参数的占位符。

curried(1)(_, 3)(2); // => [1, 2, 3], 注意占位符 '_'

为了实现占位符功能，有一个隐含的需求：我们需要知道哪些参数被预设给了绑定函数，以及哪些是在调用函数时显示提供的附加参数（这里我们称之为added参数）。

这个功能可以通过创建另外一个闭包来完成：

function fn2() {  var preset = Array.prototype.slice.call(arguments);  /*    原先是这样:    return fn.bind(null, ...arguments);  */  return function helper() {    var added = Array.prototype.slice.call(arguments);    return fn2.apply(null, [...preset, ...added]); //简单起见，使用es6  }}

上面的 fn2 几乎和 fn 一样，功能就像‘参数收集器’一样。然而，fn2 不是直接返回绑定函数，而是返回一个中间辅助函数 helper。helper 函数是未绑定的，因此它可以用来分离预设的参数和后来提供的参数。

当然，我们需要在组合时进行一些修改，而不是通过 [...preset, ...added] 将预设的参数和后来提供的参数合并起来。我们需要在preset参数中找到占位符的位置，并用有效的added参数替换它。我没有看lodash是如何实现它的，但下面是一个完成类似功能的简单实现。

// 定义占位符var _ = '_';function magician3 (targetfn, ...preset) {  var numOfArgs = targetfn.length;  var nextPos = 0; // 下一个有效输入位置的索引，可以是'_'，也可以是preset的结尾  // 查看是否有足够的有效参数  if (preset.filter(arg=> arg !== _).length === numOfArgs) {    return targetfn.apply(null, preset);  } else {    // 返回'helper'函数    return function (...added) {      // 循环并将added参数添加到preset参数      while(added.length > 0) {        var a = added.shift();        // 获取下一个占位符的位置，可以是'_'也可以是preset的末尾        while (preset[nextPos] !== _ && nextPos < preset.length) {          nextPos++        }        // 更新preset        preset[nextPos] = a;        nextPos++;      }      // 绑定更新后的preset      return magician3.call(null, targetfn, ...preset);    }  }}

第15到24行是用于将added参数放入preset数组中正确位置的逻辑：无论是占位符或是preset的结尾。该位置被标记为 nextPos 并初始化为索引0。

上述内容就是JavaScript 中怎么实现柯里化函数，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。