javaScript鏈式調用原理以及加法實現

相信不少小夥伴在面試的過程當中都被問過js鏈式調用的原理，甚至有些面試官還會讓你用其實現例如加法操做，舉例：

add(1)(2)(3)    //6

第一次看到這個題目時，或許你沒有什麼頭緒，沒關係，讓咱們慢慢來；首先，你們仍是否記得在使用jQuery時，咱們會常常這樣去操做一個jQuery節點

$("elem").show().css("color","red");

這是怎麼作到的？原理很簡單：就是jQuery節點在調用api後都會返回節點自身，相似於：

var Obj = {
    a: 1,
    func: function(){
        this.a += 1;
        return this
    }
}
Obj.func().func();
console.log(Obj.a);    //3

如今大體理解了鏈式調用的原理了吧！而後咱們再來看如何實現文章開頭的題目；首先咱們來分析一下有哪幾點是咱們須要注意的：

1. add函數在後續的鏈式調用時，應該記錄以前的加和，如何實現？

2. add函數在每次調用後既要保留自身的引用，又要返回操做結果，如何實現？

先上代碼，而後咱們逐一分析

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的目的

---

結語
以上就是我對鏈式調用的一個粗略認識，有些概念可能表達的不是很清晰；其實樓主的目的就是想引導你們去研究一下鏈式調用所涉及到的一些js知識，不喜請輕噴O(∩_∩)O哈哈~