前言
這是前端面試題系列的第 6 篇，你可能錯過了前面的篇章，可以在這裏找到：
最近，朋友T 在準備面試，他爲一道編程題所困，向我求助。原題如下：
// 寫一個 sum 方法，當使用下面的語法調用時，能正常工作
console.log(sum(2, 3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5這道題要考察的，就是對函數柯里化的理解。讓我們先來解析一下題目的要求：
- 如果傳遞兩個參數，我們只需將它們相加並返回。
- 否則，我們假設它是以sum(2)(3)的形式被調用的，所以我們返回一個匿名函數，它將傳遞給sum()（在本例中爲2）的參數和傳遞給匿名函數的參數（在本例中爲3）。
所以，sum 函數可以這樣寫：
function sum (x) {
if (arguments.length == 2) {
return arguments[0] + arguments[1];
}
return function(y) {
return x + y;
}
}arguments 的用法挺靈活的，在這裏它則用於分割兩種不同的情況。當參數只有一個的時候，進行柯里化的處理。
那麼，到底什麼是函數的柯里化呢？接下來，我們將從概念出發，探究函數柯里化的實現與用途。
什麼是柯里化
柯里化，是函數式編程的一個重要概念。它既能減少代碼冗餘，也能增加可讀性。另外，附帶着還能用來裝逼。
先給出柯里化的定義：在數學和計算機科學中，柯里化是一種將使用多個參數的一個函數轉換成一系列使用一個參數的函數的技術。
柯里化的定義，理解起來有點費勁。爲了更好地理解，先看下面這個例子：
function sum (a, b, c) {
console.log(a + b + c);
}
sum(1, 2, 3); // 6毫無疑問，sum 是個簡單的累加函數，接受3個參數，輸出累加的結果。
假設有這樣的需求，sum的前2個參數保持不變，最後一個參數可以隨意。那麼就會想到，在函數內，是否可以把前2個參數的相加過程，給抽離出來，因爲參數都是相同的，沒必要每次都做運算。
如果先不管函數內的具體實現，調用的寫法可以是這樣： sum(1, 2)(3); 或這樣 sum(1, 2)(10); 。就是，先把前2個參數的運算結果拿到後，再與第3個參數相加。
這其實就是函數柯里化的簡單應用。
柯里化的實現
sum(1, 2)(3); 這樣的寫法，並不常見。拆開來看，sum(1, 2) 返回的應該還是個函數，因爲後面還有 (3) 需要執行。
那麼反過來，從最後一個參數，從右往左看，它的左側必然是一個函數。以此類推，如果前面有n個()，那就是有n個函數返回了結果，只是返回的結果，還是一個函數。是不是有點遞歸的意思？
網上有一些不同的柯里化的實現方式，以下是個人覺得最容易理解的寫法：
function curry (fn, currArgs) {
return function() {
let args = [].slice.call(arguments);
// 首次調用時，若未提供最後一個參數currArgs，則不用進行args的拼接
if (currArgs !== undefined) {
args = args.concat(currArgs);
}
// 遞歸調用
if (args.length < fn.length) {
return curry(fn, args);
}
// 遞歸出口
return fn.apply(null, args);
}
}解析一下 curry 函數的寫法：
首先，它有 2 個參數，fn 指的就是本文一開始的源處理函數 sum。currArgs 是調用 curry 時傳入的參數列表，比如 (1, 2)(3) 這樣的。
再看到 curry 函數內部，它會整個返回一個匿名函數。
再接下來的 let args = [].slice.call(arguments);，意思是將 arguments 數組化。arguments 是一個類數組的結構，它並不是一個真的數組，所以沒法使用數組的方法。我們用了 call 的方法，就能愉快地對 args 使用數組的原生方法了。在這篇 「乾貨」細說 call、apply 以及 bind 的區別和用法 中，有關於 call 更詳細的用法介紹。
currArgs !== undefined 的判斷，是爲了解決遞歸調用時的參數拼接。
最後，判斷 args 的個數，是否與 fn (也就是 sum )的參數個數相等，相等了就可以把參數都傳給 fn，進行輸出；否則，繼續遞歸調用，直到兩者相等。
測試一下：
function sum(a, b, c) {
console.log(a + b + c);
}
const fn = curry(sum);
fn(1, 2, 3); // 6
fn(1, 2)(3); // 6
fn(1)(2, 3); // 6
fn(1)(2)(3); // 6都能輸出 6 了，搞定！
柯里化的用途
理解了柯里化的實現之後，讓我們來看一下它的實際應用。柯里化的目的是，減少代碼冗餘，以及增加代碼的可讀性。來看下面這個例子：
const persons = [
{ name: 'kevin', age: 4 },
{ name: 'bob', age: 5 }
];
// 這裏的 curry 函數，之前已實現
let getProp = curry(function (key, obj) {
return obj[key];
});
const ages = persons.map(getProp('age')); // [4, 5]
const names = persons.map(getProp('name')); // ['kevin', 'bob']在實際的業務中，我們常會遇到類似的列表數據。用 getProp 就可以很方便地，取出列表中某個 key 對應的值。
另外，爲了便於理解調用的寫法，可以擴展一下：
const names = persons.map(getProp('name'));等價於：
const names = persons.map(item => {
return getProp('name', item);
});最後，來看一個 Memoization 的例子。它用於優化比較耗時的計算，通過將計算結果緩存到內存中，這樣對於同樣的輸入值，下次只需要中內存中讀取結果。
function memoizeFunction(func) {
const cache = {};
return function() {
let key = arguments[0];
if (cache[key]) {
return cache[key];
} else {
const val = func.apply(null, arguments);
cache[key] = val;
return val;
}
};
}
const fibonacci = memoizeFunction(function(n) {
return (n === 0 || n === 1) ? n : fibonacci(n - 1) + fibonacci(n - 2);
});
console.log(fibonacci(100)); // 輸出354224848179262000000
console.log(fibonacci(100)); // 輸出354224848179262000000代碼中，第2次計算 fibonacci(100) 則只需要在內存中直接讀取結果。
總結
函數的柯里化，是 Javascript 中函數式編程的一個重要概念。它返回的，是一個函數的函數。其實現方式，需要依賴參數以及遞歸，通過拆分參數的方式，來調用一個多參數的函數方法，以達到減少代碼冗餘，增加可讀性的目的。
雖然一開始理解起來有點雲裏霧裏的，但一旦理解了其中的含義和具體的使用場景，用起來就會得心應手了。
PS：歡迎關注我的公衆號 “超哥前端小棧”，交流更多的想法與技術。
