前言

本文1454字，閱讀大約需要4分鐘。

總括: 本文以初學者的角度來闡述Javascript中柯里化的概念以及如何在工作中進行使用。

• 原文地址：理解Javascript的柯里化

• 知乎專欄: 前端進擊者

• 博主部落格地址：Damonare的個人部落格

事親以敬，美過三牲。

正文

函數語言程式設計是一種如今比較流行的程式設計正規化，它主張將函式作為引數進行傳遞，然後返回一個沒有副作用的函式，說白了，就是希望一個函式只做一件事情。

像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」，可領取一攬子前端技術書籍；

相關推薦