js鏈式調用


我們都很熟悉jQuery了,只能jQuery中一種非常牛逼的寫法叫鏈式操作

* $('#div').css('background','#ccc').removeClass('box').stop().animate({width:300})

那這是如何實現的呢,我自己寫了個例子:並非jQuery源碼

Ferrinte.prototype.show=function () {
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display='block';
    }

    return this;
};

Ferrinte.prototype.hide=function () {
    for(var i=0;i<this.elements.length;i++)
    {
        this.elements[i].style.display='none';
    }
    return this;
};

其實很簡單就是通過return this實現的,當某個函數執行完畢,在把執行的結果返回,這樣其他的函數就能繼續調用了


原生js也是支持鏈式調用的,比如說:

    var arr = [1,2,3,4,5];
    arr.reverse().join("").split();
    console.log(arr);

在原生js中,鏈式調用還可以這樣用

    function show(str) {
        console.log(str);
        return show;
    }
    show(123)(456)(789);

// 控制台打印結果
// 123
// 456
// 789

我們發現,不寫函數名稱只寫()也可以實現函數執行,那我們這樣寫可以不可以呢

    function show(str) {
        console.log(str);
        return show;
    }(123)

原則上是可以的,但是這樣不符合js語法,會報錯

我們給函數外加上括號

    (function show(str) {
        console.log(str);
        return show;
    })(123)

這樣就OK了,一個自執行的函數
但是這樣寫在嚴格模式下回報錯,我們把函數賦值給一個變量就好了

    var a = (function show(str) {
        console.log(str);
        return show;
    })(123)

*注意:自執行函數不會被內存機制回收



作者:ferrint
鏈接:http://www.jianshu.com/p/a84093c9c144
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM