摘要：原題如下寫一個方法，當使用下面的語法調用時，能正常工作這道題要考察的，就是對函數柯里化的理解。當參數只有一個的時候，進行柯里化的處理。這其實就是函數柯里化的簡單應用。

這是前端面試題系列的第 6 篇，你可能錯過了前面的篇章，可以在這里找到：

ES6 中箭頭函數的用法

this 的原理以及用法

偽類與偽元素的區別及實戰

如何實現一個圣杯布局？

今日頭條 面試題和思路解析

最近，朋友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 函數，之前已實現
const getProp = curry(function (obj, index) {
    const args = [].slice.call(arguments);
    return obj[args[args.length - 1]];
});

const ages = persons.map(getProp("age")); // [4, 5]
const names = persons.map(getProp("name")); // ["kevin", "bob"]

在實際的業務中，我們常會遇到類似的列表數據。用 getProp 就可以很方便地，取出列表中某個 key 對應的值。

需要注意的是，const names = persons.map(getProp("name")); 執行這條語句時 getProp 的參數只有一個 name，而定義 getProp 方法時，傳入 curry 的參數有2個，obj 和 index（這里必須寫 2 個及以上的參數）。

為什么要這么寫？關鍵就在于 arguments 的隱式傳參。

const getProp = curry(function (obj, index) {
    console.log(arguments);
    // 會輸出4個類數組，取其中一個來看
    // {
    //     0: {name: "kevin", age: 4},
    //     1: 0,
    //     2: [
    //         {name: "kevin", age: 4},
    //         {name: "bob", age: 5}
    //     ],
    //     3: "age"
    // }
});

map 是 Array 的原生方法，它的用法如下：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg]);

所以，我們傳入的 name，就排在了 arguments 的最后。為了拿到 name 對應的值，需要對類數組 arguments 做點轉換，讓它可以使用 Array 的原生方法。所以，最終 getProp 方法定義成了這樣：

const getProp = curry(function (obj, index) {
    const args = [].slice.call(arguments);
    return obj[args[args.length - 1]];
});

當然，還有另外一種寫法，curry 的實現更好理解，但是調用的代碼卻變多了，大家可以根據實際情況進行取舍。

const getProp = curry(function (key, obj) {
    return obj[key];
});

const ages = persons.map(item => {
    return getProp(item)("age");
});
const names = persons.map(item => {
    return getProp(item)("name");
});

最后，來看一個 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：歡迎關注我的公眾號 “超哥前端小棧”，交流更多的想法與技術。