javascript 鏈式寫法


熟悉Jquery的同學都知道,它對dom的操作基本都鏈式調用的寫法,這種給人感覺就是很簡潔,易懂,而且最大的好處就是避免多次重復使用一個對象變量。

鏈式的實現方式:
鏈式操作是在對象的方法中通過最后返回自身對象(return this),返回的對象就可以繼續調用它里面的方法。那么,簡單實現一下:

var o ={f:function(r){console.log(+new Date , r); return this;}};

o.f(1).f(2).f(3).f(4).f(5).f(6).f(7).f(8).f(9);

再例如:

var a = {
    b: function(bb) {
        console.log(bb);
        return this;
    },    
    c: function(cc) {
        console.log(cc)
        return this;
    },    
    d: function(dd) {
        console.log(dd)
        return this;
    }
}
a.b(1).c(2).d(3);

 

改造為工廠模式
通過一個函數,利用它來創建了一個對象,然后返回這個對象。代碼如下: 

function Obj() {}
Obj.prototype ={//擴展它的prototype
    setNum:function (num) {
        this.num = num;
        return this;
    },
    fn_a:function(){
        this.num++;
        return this;
    },
    fn_b:function(pram){
        this.num=this.num*pram;
        return this;
    },
    getNum:function (){
       return this.num;
    },
};
function I() {//工廠函數
    return new Obj();
}
var num=I().setNum(1).fn_a().fn_b(5).getNum();
console.log(num);

其實很簡單就是通過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)(123)(123)(123)

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

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

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

https://www.jianshu.com/p/a84093c9c144

https://www.cnblogs.com/JChen666/p/3614971.html


免責聲明!

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



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