第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;
}
複製代碼

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

---

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