第13題 - 鏈式調用和argument

面試題目(頭條)：

設計一個sum函數，使其滿足以下要求

sum(1, 2).sumOf() // 返回 3

sum(1, 2)(3).sumOf() // 返回 6

sum(1)(2, 3, 4).sumOf() // 返回 10

sum(1, 2)(3, 4)(5).sumOf() // 返回 15

答案解析：

這道題目主要考察以下兩點：

1. 函數參數 arguments 的應用；
2. 函數的鏈式調用實現；

arguments

arguments對象是函數(非箭頭)內部都可以訪問到的局部變量，該對象是一個類數組對象，具有數組的length，索引特性。

function print () {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments.length); // 3
}

print(1, 2, 3);


// 利用arguments的索引特性，call、apply函數，可以使用數組的方法
Array.prototype.shift.call(arguments);


// 將arguments轉爲數組，Array參數爲一個，並且是整數時，表示數組長度，超過一個時表示數組元素
var args = arguments.length == 1 ? [arguments[0]] : Array.apply(null, arguments);

鏈式編碼原理

鏈式調用原理就是作用域鏈，實現需要做如下的工作：

1. 因爲需要鏈式調用，所以需要返回對象本身的引用；
2. 利用閉包，存儲累計值，以便最後返回；

示例：

function add (num) {
    var count = num;
    var _b = function(l){
        count += l;
        return _b
    }
    _b.valueOf = function(){
        return count
    }
    return _b
}
var c = add(1)(2)(3);
console.log(c)    //6

下面我們來詳細分析一下代碼：

1. 首先，在add方法內部，我們是通過私有的_b方法實現的加法，而不是在add方法自身實現的，這裏涉及到了函數式編程，這個概念我們就不在此做展開了，有興趣的童鞋可以自己研究一下，可以說這是一種很不錯的開發模式；add第一次執行後，返回了_b方法；
2. 在返回的_b方法中我們形成了對count的閉包，這樣我們可以實現累計加和；還有一點需要注意，就是_b方法每次執行時都返回了它自身，這就實現了鏈式；
3. 最後，也是比較關鍵的，就是在輸出add的結果，即add(1)(2)(3)的結果時，如何讓它輸出count，這裏涉及了valueOf和toString方法的知識，還是那句話，感興趣的童鞋可以自己研究一下；在這裏最後能夠正確輸出6的原理是：_b是Function，是Object的一種特殊形式，當我們做類似打印console等操作時，會自動調用其valueOf方法（其實底層實現沒有我說的這麼簡單，哈哈，但是大概是這麼個意思），所以我們重寫了valueOf方法來達到返回count的目的；

綜上，我們的面試題目，就可以做如下實現：

function sum () {
    var ary = [].slice.apply(arguments); 
    var fn = function () {
        ary = ary.concat([].slice.apply(arguments));
        return fn;
    }

    fn.sumOf = function () {
        return ary.reduce((pre, cur) => {
            return pre + cur;
        })
    }
    return fn;
}

1. 利用閉包，設置變量ary存儲函數鏈式調用期間的所有參數；
2. 自定義內部函數，調用時返回自身；
3. 定義fn的靜態方法sumOf，用於計算數組ary的參數和；

下面是我實現的另一種方式，但需要設置一個函數靜態變量值存儲數據：

function sum() {
    let s = 0;
    for(let i = 0; i < arguments.length; i++) {
        s += arguments[i];
    }
    sum.result += s;
    return sum;
}

sum.result = 0;

sum.sumOf = function () {
    let temp = sum.result;
    sum.result = 0;
    return temp;
}

以上兩種實現方式，涉及的知識點基本一樣，歡迎讀者留言其他實現方式。

---

掃一掃 關注我的公衆號【前端名獅】，更多精彩內容陪伴你！