javascript 閉包詳解

2019-11-20 13:09:13

字體：大中小

來源：轉載

供稿：網友

javascript 閉包是一個很有趣的東東。看了些相關資料//m.survivalescaperooms.com/article/29472.htm，對其印象最深刻的是：實現了public 和private。

創建一個非匿名閉包最簡單的語法是：

復制代碼代碼如下:

var obj = (function(){//各種代碼 });

閉包最經典的例子：

復制代碼代碼如下:

var makeCounter = (function () {
        var i = 1; 
        this.test=function(){ 
            console.log(i);
            i++; 
        }
        return this;
    });
    var obj = makeCounter();
    obj.test(); // 1
    obj.test(); // 2
    var obj1 = makeCounter();
    obj1.test(); // 1
    obj1.test(); // 2

private 與 public :

復制代碼代碼如下:

var makeCounter= (function () {
        var i = 1;
        //這貨是private的
        function log(){
            console.log(i);
            i++;
        }
        //這貨是public的
        this.test(){
            log();
        }
        return this;
    });
    var obj = makeCounter();
    obj.test(); // 1
    obj.test(); // 2 
    obj.log(); //undefined    

自執行函數：

　　第一次看到這樣的代碼時的感覺是：好高級；

復制代碼代碼如下:

var obj = (function(window){
      //各種代碼
}(window));

　　然后google了下，發現他們經常都會這樣寫：

復制代碼代碼如下:

var obj= (function () {
        var i = 1; 
        this.test=function(){ 
            console.log(i);
            i++; 
        }
        return this;
    }());
    obj.test(); // 1
    obj.test(); // 2

最簡單的理解，程序員偷懶把兩步寫成了一步。

復制代碼代碼如下:

    //這是一個函數。它應該這樣用obj()
    var makeCounter = function () {
        //各種代碼 
    }
    //這是一個對象。它類似于 var obj = makeCounter();
    var obj = (function () {
        //各種代碼
    }());

　　它也可以有參數：

復制代碼代碼如下:

    var output = "new test";
    var obj = (function (msg) {
        this.test = function(){
            console.log(msg);
        }
        return this;
    }(output));
    obj.test();

　　它還可以更復雜更高級點：

復制代碼代碼如下:

var output = "new test";
    var obj = (function (obj, msg) {
        //這貨也是私有的。類似obj.i(!=obj.i),卻又不是obj.i（因為外部不可訪問）。
        var i = 1;
        //private
        function log() {
            console.log(i + " : " + msg);
            i++;
        }
        //public
        obj.test = function () {
            log();
        }
        return obj;
    }(obj, output));
    obj.test(); // 1 : new test
    obj.i = 100;
    //i沒被改變
    obj.test(); // 2 : new test