javascript中的閉包

　　1. 簡要介紹

　　閉包可謂是js中的一大特色了，即使你對閉包沒概念，你可能已經在不知不覺中使用到了閉包。閉包是什么，閉包就是一個函數可以訪問到另一個函數的變量。這就是閉包，解釋起來就這么一句話，不明白？我們來看一個簡單的例子：

function getName(){
    var name='wenzi';
    setTimeout(function(){
        console.log(name);
    }, 500);
}
getName();

　　這就其實已經是閉包了，setTimeout中的function是一個匿名函數，這個匿名函數里的name是geName()作用域中的變量，匿名函數里只有一個輸出語句：console.log();

　　還有一個很經典的例子也可以幫助我們理解什么是閉包：

function create(){
    var i=0;
    // 返回一個函數，暫且稱之為函數A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一個函數
c(); // 函數執行
c(); // 再次執行
c(); // 第三次執行

　　在上面的例子中，create()返回的是一個函數，我們暫且稱之為函數A吧。在函數A中，有兩條語句，一條是變量i自增（i++），一條是輸出語句（console.log）。第一次執行執行c()時會產生什么樣的結果？嗯，輸出自增后的變量i，也就是輸出1；那么第二次執行c()呢，對，會輸出2；第三次執行c()時會輸出3，依次累加。這個create()函數依然滿足了我們在剛開始時的定義，函數A使用到了另一個函數create()中的變量i。

　　可是為什么會產生這樣的輸出呢，為什么i就能一直自增呢，create函數已經執行完並返回結果了呀，可是為什么還能接着使用i呢，而且i還能自增。這里就涉及到了三個比較重要的概念，講解完這三個概念，我們對閉包就可以有一個比較好的理解了。

　　2. 三個重要概念

　　本節的大部分解釋來自於《JavaScript高級程序(第3版)》

　　2.1 執行環境與變量對象

　　執行環境是JavaScript中一個重要的概念，它決定了變量或函數是否有權訪問其他的數據，決定了它們各自的行為。每個執行環境都有一個與之對應的變量對象，執行環境中定義的所有變量和函數都保存在這個對象中。雖然我們的代碼無法訪問這個對象，但是解析器在處理數據時會在后台使用它。

我們用一個比較簡單的比喻來形容這兩個概念。執行環境就是一個人，變量對象就是這個人的身份證號，每個人都有其對應的身份證號。他這個人決定了他身上的很多屬性和方法（動作），而且這個人的屬性和方法都在他的身份證號上，當這個人消亡的時候，身份證號也就隨之就注銷了。

　　全局執行環境是最外層的一個執行環境。在web瀏覽器中，全局執行環境被認為是window對象，因為所有的全局變量和全局函數都是作為window對象的屬性和方法創建的。某個執行環境中的所有代碼執行完畢后，該環境被銷毀，保存在其中的所有變量和函數定義也隨之銷毀（全局執行環境直到應用程序退出——例如關閉網頁或者瀏覽器——時才會被銷毀），被垃圾回收機制回收。

　　每個函數都有自己的執行環境。當執行流進入一個函數時，函數的環境就會被推入到一個環境棧中。而在函數執行后，棧將其環境彈出，把控制權返回給之前的執行環境。

　　2.2 作用域鏈

　　作用域鏈是當代碼在一個環境中執行時創建的，作用域鏈的用途就是要保證執行環境中能有效有序的訪問所有變量和函數。作用域鏈的最前端始終都是當前執行的代碼所在環境的變量對象，下一個變量對象是來自其父親環境，再下一個變量對象是其父親的父親環境，直到全局執行環境。

　　標識符解析是沿着作用域鏈一級一級地搜索標識符的過程。搜索過程始終從作用域鏈的前端開始，然后逐級地向后回溯，直到找到標識符為止（如果找不到標識符，通常會導致錯誤發生）。其實，通俗的理解就是：在本作用域內找不到變量或者函數，則在其父親的作用域內尋找，再找不到則到父親的父親作用域內尋找，直到在全局的作用域內尋找！

　　2.3 垃圾回收機制

　　在js中有兩種垃圾收集的方式：標記清除和引用計數。

　　標記清除：垃圾收集器在運行時會給存儲在內存中的所有變量都加上標記（具體的標記方式暫時就不清楚了），待變量已不被使用或者引用，去掉該標記或添加另一種標記。最后，垃圾收集器完成內存清除工作，銷毀那些已無法訪問到的這些變量並回收他們所占用的空間。

　　引用計數：一般來說，引用計數的含義是跟蹤記錄每個值被引用的次數。當聲明一個變量並將一個引用類型值賦給該變量時，則這個值的引用次數便是1，如果同一個值又被賦給另一個變量，則該值的引用次數加1，相反，如果包含對這個值引用的變量又取得了另一個值，則這個值的引用次數減1。當這個值的引用次數為0時，說明沒有辦法訪問到它了，因而可以將其占用的內存空間回收。

　　除了一些極老版本的IE，目前市面上的JS引擎基本采用標記清除來除了垃圾回收。但是需要注意的是IE中的DOM由於機制問題，是采用了引用計數的方式，所以會有循環引用的問題，造成內存泄露。

var ele = document.getElementById(“element”);
var obj = new Object();
ele.obj = obj; // DOM元素ele的obj引用obj變量
obj.ele = ele; // obj變量的ele引用了DOM元素ele

 　　這樣就造成了循環引用的問題，導致垃圾回收機制回收不了ele和obj。不過，可以在不使用ele和obj時，對這兩個變量進行 null 賦值，然后垃圾回收機制就會回收它們了。

　　3. 理解閉包

　　在第2部分講解了三個重要的概念，這三個概念有助於我們更好的理解閉包。

　　我們再次拿出上面的這個例子：

function create(){
    var i=0;
    // 返回一個函數，暫且稱之為函數A
    return function(){
        i++;
        console.log(i);
    }
}
var c = create(); // c是一個函數，即函數A
c(); // 函數執行
c(); // 再次執行
c(); // 第三次執行

 　　從上面的“每個函數都有自己的執行環境”可以知道：create()函數是一個執行環境，函數A也是一個執行環境，且函數A的執行環境在create()的里面。這樣就形成了一個作用域鏈：window->create->A。當執行c()時，函數A就會首先在當前執行環境中尋找變量i，可是沒有找到，那么只能順着作用域鏈向后找；OK，在create()的執行環境中找到了，那么就可以使用了變量i了。

　　可是我們還有一個疑問，按照上面的說法，函數create()執行完畢后，這個函數與里面的變量和方法應該被銷毀了呀，可是為什么函數c()多次執行時依然能夠輸出變量i呢。這就是閉包的獨特之處。

　　函數create()執行完畢后，雖然它的作用域鏈會被銷毀，即不再存在window->create這個鏈式關系，但是函數A()[c()]的作用域鏈還依然引用着create()的變量對象，還存在着window->create->A的鏈式關系，導致垃圾回收機制不能回收create()的變量對象，create()的變量對象仍然停留在內存中，直到函數A()[c()]被銷毀后，create()的變量對象才會被銷毀。

　　因此，雖然create()已經執行完畢了，但是create()的變量對象並沒有被回收，還停留在內存中，依然可以使用。

　　從上面的講解中我們可以看到，閉包會攜帶包含它的函數的作用域，因此會比其他函數占用更多的內存。當頁面中存在過多的閉包，或者閉包的嵌套很多很深時，會導致內存占用過多。因此，在這里建議：慎用閉包。

　　4. 閉包與變量

　　有很多新手為DOM元素綁定事件時，通常會這么寫：

function bindClick(){
    var li = document.getElementsByTagName('li'); // 假設一共有5個li標簽
    for(var i=0; i<li.length; i++){
        li[i].onClick = function(){
            console.log('click the '+i+' li tag');
        }
    }
}

 　　他的本意是想為每個li標簽綁定一個單獨的事件，點擊第幾個li標簽，就能輸出幾。可是，最后的結果卻是，點擊哪個li標簽輸出的都是5，這是為什么呢？

　　其實這位程序員寫的bindClick()已經構成了一個閉包，下面的這個函數有他的作用域，而變量i本不屬於這個函數的作用域，而是屬於bindClick()中的：

// 匿名函數
function(){
    console.log('click the '+i+' li tag');
}

 　　因此，這就構成了一個含有閉包的作用域鏈：window->bindClick->匿名函數。可是這跟輸出的i有關系么？有。作用域鏈中的每個變量對象保存的是對變量和方法的引用，而不是保存這個變量的某一個值。當執行到匿名函數時，bindClick()其實已經執行完畢了，變量i的值就是5，此時每個匿名函數都引用着同一個變量i。

　　不過我們稍微修改一下，以滿足我們的預期：

function bindClick(){
    var li = document.getElementsByTagName('li');
    for(var i=0; i<li.length; i++){
        li[i].onClick = (function(j){
            console.log('click the '+j+' li tag');
        })(i);
    }
}

 　　在這里，我們使用立即執行的匿名函數來保證傳入的值就是當前正在操作的變量i，而不是循環完成后的值。

 　　5. 閉包的應用場景

　　（1）在內存中維持一個變量。比如前面講的小例子，由於閉包，函數create()中的變量i會一直存在於內存中，因此每次執行c()，都會給變量i加1.

　　（2）保護函數內的變量安全。還是那個小例子，函數create()中的變量c只有內部的函數才能訪問，而無法通過其他途徑訪問到，因此保護了變量c的安全。

　　（3）實現面向對象中的對象。javascript並沒有提供類這樣的機制，但是我們可以通過閉包來模擬出類的機制，不同的對象實例擁有獨立的成員和狀態。

　　這里我們看一個例子：

function Student(){
    var name = 'wenzi';

    return {
        setName : function(na){
            name = na;
        },

        getName : function(){
            return name;
        }
    }
}
var stu = new Student();
console.log(stu.name); // undefined
console.log(stu.getName()); // wenzi

 　　這就是一個用閉包實現的簡單的類，里面的name屬性是私有的，外部無法進行訪問，只能通過setName和getName進行訪問。

　　當然，閉包還存在另外一種形式，剛才我們已經使用到了：

;(function(w){
    console.log(w);
})(window)

 　　以前也寫過一次的閉包的文章，兩個可以連着一起看：http://www.cnblogs.com/xumengxuan/p/3753713.html 

 

　　本文地址：http://www.xiabingbao.com/javascript/2015/05/23/javascript-closure/