理解Javascript的柯里化

前言

本文1454字，阅读大约须要4分钟。

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

• 原文地址：理解Javascript的柯里化
• 知乎专栏: 前端进击者
• 博主博客地址：Damonare的我的博客

事亲以敬，美过三牲。

<!-- more -->

正文

函数式编程是一种现在比较流行的编程范式，它主张将函数做为参数进行传递，而后返回一个没有反作用的函数，说白了，就是但愿一个函数只作一件事情。

像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」，可领取一揽子前端技术书籍；