jquery 鏈?zhǔn)秸Z(yǔ)法如何實(shí)現(xiàn)，底層代碼？

$("#Test").css('color','red').show(200).removeClass('style');

上面例子就是鏈?zhǔn)讲僮?，為id=test 的對(duì)象進(jìn)行三項(xiàng)操作；

鏈?zhǔn)秸{(diào)用的原理
在對(duì)象上的方法最后 加上return this
把對(duì)象再返回回來(lái)，對(duì)象就繼續(xù)調(diào)用方法了，所以就可以鏈?zhǔn)讲僮髁恕?/p>

var obj={};
obj.a=function(){
    console.log("a")
    return this
}
obj.b=function(){
    console.log("n")
    return this
}
obj.a().b();

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

下面我們來(lái)詳細(xì)分析一下代碼：
1.首先，在add方法內(nèi)部，我們是通過(guò)私有的_b方法實(shí)現(xiàn)的加法，而不是在add方法自身實(shí)現(xiàn)的，這里涉及到了函數(shù)式編程，這個(gè)概念我們就不在此做展開(kāi)了，有興趣的童鞋可以自己研究一下，可以說(shuō)這是一種很不錯(cuò)的開(kāi)發(fā)模式；add第一次執(zhí)行后，返回了_b方法
2.在返回的_b方法中我們形成了對(duì)count的閉包，這樣我們可以實(shí)現(xiàn)累計(jì)加和；還有一點(diǎn)需要注意，就是_b方法每次執(zhí)行時(shí)都返回了它自身，這就實(shí)現(xiàn)了鏈?zhǔn)?br> 3.最后，也是比較關(guān)鍵的，就是在輸出add的結(jié)果，即add(1)(2)(3)的結(jié)果時(shí)，如何讓它輸出count，這里涉及了valueOf和toString方法的知識(shí)，還是那句話，感興趣的童鞋可以自己研究一下；在這里最后能夠正確輸出6的原理是：_b是Function，是Object的一種特殊形式，當(dāng)我們做類似打印console等操作時(shí)，會(huì)自動(dòng)調(diào)用其valueOf方法（其實(shí)底層實(shí)現(xiàn)沒(méi)有我說(shuō)的這么簡(jiǎn)單，哈哈，但是大概是這么個(gè)意思），所以我們重寫(xiě)了valueOf方法來(lái)達(dá)到返回count的目的