你不知道的JavaScript--Item10 閉包（closure）

時間 2019-11-17

標籤不知道 javascript item10 item 閉包 closure 欄目 JavaScript 简体版

原文原文鏈接

JavaScript 閉包到底是什麼?

用JavaScript一年多了，閉包老是讓人二丈和尚摸不着頭腦。陸陸續續接觸了一些閉包的知識，也犯過幾回由於不理解閉包致使的錯誤，一年多了資料也看了一些，但仍是不是很是明白，最近偶然看了一下 jQuery基礎教程的附錄，發現附錄A對JavaScript的閉包的介紹簡單易懂，因而借花獻佛總結一下。javascript

一、定義

閉包：是指有權訪問另一個函數做用域中的變量的函數。建立閉包的常見方式就是在一個函數內部建立另一個函數。html

直接上例子java

function a(){
    var i=0;
    function b(){
        alert(++i);
    }
    return b;
}
var c = a();
c();

這段代碼有兩個特色：jquery

一、函數b嵌套在函數a內部；
二、函數a返回函數b。數組

這樣在執行完var c=a()後，變量c其實是指向了函數b，再執行c()後就會彈出一個窗口顯示i的值(第一次爲1)。這段代碼其實就建立了一個閉包，爲何？由於函數a外的變量c引用了函數a內的函數b，就是說：
當函數a的內部函數b被函數a外的一個變量引用的時候，就建立了一個閉包。安全

我猜測你必定仍是不理解閉包，由於你不知道閉包有什麼做用，下面讓咱們繼續探索。markdown

二、閉包有什麼做用？

簡而言之，閉包的做用就是在a執行完並返回後，閉包使得Javascript的垃圾回收機制GC不會收回a所佔用的資源，由於a的內部函數b的執行須要依賴a中的變量。這是對閉包做用的很是直白的描述，不專業也不嚴謹，但大概意思就是這樣，理解閉包須要按部就班的過程。
在上面的例子中，因爲閉包的存在使得函數a返回後，a中的i始終存在，這樣每次執行c()，i都是自加1後alert出i的值。閉包

那麼咱們來想象另外一種狀況，若是a返回的不是函數b，狀況就徹底不一樣了。由於a執行完後，b沒有被返回給a的外界，只是被a所引用，而此時a也只會被b引用，所以函數a和b互相引用但又不被外界打擾(被外界引用)，函數a和b就會被GC回收。(關於Javascript的垃圾回收機制將在後面詳細介紹)app

三、閉包內的微觀世界

若是要更加深刻的瞭解閉包以及函數a和嵌套函數b的關係，咱們須要引入另外幾個概念：函數的執行環境(excution context)、活動對象(call object)、做用域(scope)、做用域鏈(scope chain)。以函數a從定義到執行的過程爲例闡述這幾個概念。函數

一、當定義函數a的時候，js解釋器會將函數a的做用域鏈(scope chain)設置爲定義a時a所在的「環境」，若是a是一個全局函數，則scope chain中只有window對象。
二、當函數a執行的時候，a會進入相應的執行環境(excution context)。
三、在建立執行環境的過程當中，首先會爲a添加一個scope屬性，即a的做用域，其值就爲第1步中的scope chain。即a.scope=a的做用域鏈。
四、而後執行環境會建立一個活動對象(call object)。活動對象也是一個擁有屬性的對象，但它不具備原型並且不能經過JavaScript代碼直接訪問。建立完活動對象後，把活動對象添加到a的做用域鏈的最頂端。此時a的做用域鏈包含了兩個對象：a的活動對象和window對象。
五、下一步是在活動對象上添加一個arguments屬性，它保存着調用函數a時所傳遞的參數。
六、最後把全部函數a的形參和內部的函數b的引用也添加到a的活動對象上。在這一步中，完成了函數b的的定義，所以如同第3步，函數b的做用域鏈被設置爲b所被定義的環境，即a的做用域。

到此，整個函數a從定義到執行的步驟就完成了。此時a返回函數b的引用給c，又函數b的做用域鏈包含了對函數a的活動對象的引用，也就是說b能夠訪問到a中定義的全部變量和函數。函數b被c引用，函數b又依賴函數a，所以函數a在返回後不會被GC回收。

當函數b執行的時候亦會像以上步驟同樣。所以，執行時b的做用域鏈包含了3個對象：b的活動對象、a的活動對象和window對象，當在函數b中訪問一個變量的時候，搜索順序是先搜索自身的活動對象，若是存在則返回，若是不存在將繼續搜索函數a的活動對象，依次查找，直到找到爲止。若是整個做用域鏈上都沒法找到，則返回undefined。若是函數b存在prototype原型對象，則在查找完自身的活動對象後先查找自身的原型對象，再繼續查找。這就是Javascript中的變量查找機制。

四、閉包的應用場景

一、保護函數內的變量安全。以最開始的例子爲例，函數a中i只有函數b才能訪問，而沒法經過其餘途徑訪問到，所以保護了i的安全性。
二、在內存中維持一個變量。依然如前例，因爲閉包，函數a中i的一直存在於內存中，所以每次執行c()，都會給i自加1。
以上兩點是閉包最基本的應用場景，不少經典案例都源於此。

五、Javascript的垃圾回收機制

在Javascript中，若是一個對象再也不被引用，那麼這個對象就會被GC回收。若是兩個對象互相引用，而再也不被第3者所引用，那麼這兩個互相引用的對象也會被回收。由於函數a被b引用，b又被a外的c引用，這就是爲何函數a執行後不會被回收的緣由。

在javascript中沒有塊級做用域，通常爲了給某個函數申明一些只有該函數才能使用的局部變量時，咱們就會用到閉包，這樣咱們能夠很大程度上減小全局做用域中的變量，淨化全局做用域。

使用閉包有如上的好處，固然這樣的好處是須要付出代價的，代價就是內存的佔用。

如何理解上面的那句話呢？

每一個函數的執行，都會建立一個與該函數相關的函數執行環境，或者說是函數執行上下文。這個執行上下文中有一個屬性 scope chain（做用域鏈指針），這個指針指向一個做用域鏈結構，做用域鏈中的指針又都指向各個做用域對應的活動對象。正常狀況，一個函數在調用開始執行時建立這個函數執行上下文及相應的做用域鏈，在函數執行結束後釋放函數執行上下文及相應做用域鏈所佔的空間。

先引用–John Hou的幾張圖http://www.cnblogs.com/johnhou/p/javascript.html

//聲明函數
function test(){
    var str = "hello world";
    console.log(str);
}
//調用函數
test();

在調用函數的時候會在內存中生成以下圖的結構：

可是閉包的狀況就有點特殊了，因爲閉包函數能夠訪問外層函數中的變量，因此外層函數在執行結束後，其做用域活動對象並不會被釋放（注意，外層函數執行結束後執行環境和對應的做用域鏈就會被銷燬），而是被閉包函數的做用域鏈所引用，直到閉包函數被銷燬後，外層函數的做用域活動對象纔會被銷燬。這也正是閉包要佔用內存的緣由。

因此使用閉包有好處，也有壞處，濫用閉包會形成內存的大量消耗。

使用閉包還有其餘的反作用，能夠說是bug，也能夠說不是，相對不一樣的業務可能就會有不一樣的見解。

這個反作用是閉包函數只能取到外層函數變量的最終值。

測試代碼以下:(這裏使用了jquery對象)

/*閉包缺陷*/
    (function($){
        var result = new Array(),
        i = 0;
        for(;i<10;i++){
            result[i] = function(){
                return i;
            };
        }
        $.RES1 = result;
    })(jQuery);
    // 執行數組中的函數
    $.RES1[0]();

上面的代碼先經過匿名函數表達式開闢了一塊私有做用域，這個匿名函數就是咱們上面所說的外層函數，該外層函數有一個參數$,同時還定義了變量result和 I , 經過for循環給數組result賦值一個匿名函數，這個匿名函數就是閉包，他訪問了外層函數的變量I , 理論上數組resulti 會返回相應的數組下標值，實際狀況卻不如所願。

如上代碼 $.RES10 的執行結果是10.

爲何會這樣呢，由於i的最終值就是10.

下面咱們經過下圖來詳細說明下，上面的那段代碼執行時在內存中到底發生了什麼：

那麼這個反作用有沒有辦法能夠修復呢？固然能夠！

咱們能夠經過下面的代碼來達到咱們的預期。

/*修復閉包缺陷*/
    (function($){
        var result = new Array(),
        i = 0;
        for(;i<10;i++){
            result[i] = function(num){
                return function(){
                    return num;
                }
            }(i);
        }
        $.RES2 = result;
    })(jQuery);
    //調用閉包函數
    console.log($.RES2[0]());

上面的代碼又在內存中發生了什麼？咱們一樣用下面的一幅圖來詳細解釋。看懂了上面的圖，咱們也就不難理解下面的圖。

6.簡單的例子

首先從一個經典錯誤談起，頁面上有若干個div，咱們想給它們綁定一個onclick方法，因而有了下面的代碼

<div id="divTest">
    <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
<div id="divTest2">
    <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>


$(document).ready(function() {
      var spans = $("#divTest span");
      for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() { alert(i); } } });

很簡單的功能但是卻恰恰出錯了，每次alert出的值都是4，簡單的修改就好使了

var spans2 = $("#divTest2 span");
$(document).ready(function() {
    for (var i = 0; i < spans2.length; i++) {
        (function(num) {
            spans2[i].onclick = function() {
                alert(num);
            }
        })(i);
    }
});

7.內部函數

讓咱們從一些基礎的知識談起,首先了解一下內部函數。內部函數就是定義在另外一個函數中的函數。例如：

function outerFn () {
    functioninnerFn () {}
}

innerFn就是一個被包在outerFn做用域中的內部函數。這意味着，在outerFn內部調用innerFn是有效的，而在outerFn外部調用innerFn則是無效的。下面代碼會致使一個JavaScript錯誤：

function outerFn() {
    document.write("Outer function<br/>");
    function innerFn() {
        document.write("Inner function<br/>");
    }
}
innerFn();//Uncaught ReferenceError: innerFn is not defined

不過在outerFn內部調用innerFn，則能夠成功運行：

function outerFn() {
            document.write("Outer function<br/>");
            function innerFn() {
                document.write("Inner function<br/>");
            }
            innerFn();
        }
        outerFn();

八、偉大的逃脫（內部函數如何逃脫外部函數）

JavaScript容許開發人員像傳遞任何類型的數據同樣傳遞函數，也就是說，JavaScript中的內部函數可以逃脫定義他們的外部函數。

逃脫的方式有不少種，例如能夠將內部函數指定給一個全局變量：

//定義全局變量逃脫
var globalVar;
function outerFn() {
    document.write("Outer function<br/>");          
    function innerFn() {
        document.write("Inner function<br/>");
    }
    globalVar = innerFn;
}
outerFn(); //Outer function Inner function globalVar(); //Outer function Inner function innerFn(); //ReferenceError: innerFn is not defined

調用outerFn時會修改全局變量globalVar，這時候它的引用變爲innerFn，此後調用globalVar和調用innerFn同樣。這時在outerFn外部直接調用innerFn仍然會致使錯誤，這是由於內部函數雖然經過把引用保存在全局變量中實現了逃脫，但這個函數的名字依然只存在於outerFn的做用域中。

也能夠經過在父函數的返回值來得到內部函數引用

function outerFn() {
    document.write("Outer function<br/>");
    function innerFn() {
        document.write("Inner function<br/>");
    }
   return innerFn;
}
var fnRef = outerFn();
fnRef();

這裏並無在outerFn內部修改全局變量，而是從outerFn中返回了一個對innerFn的引用。經過調用outerFn可以得到這個引用，並且這個引用能夠能夠保存在變量中。

這種即便離開函數做用域的狀況下仍然可以經過引用調用內部函數的事實，意味着只要存在調用內部函數的可能，JavaScript就須要保留被引用的函數。並且JavaScript運行時須要跟蹤引用這個內部函數的全部變量，直到最後一個變量廢棄，JavaScript的垃圾收集器才能釋放相應的內存空間（紅色部分是理解閉包的關鍵）。

說了半天總算和閉包有關係了，閉包是指有權限訪問另外一個函數做用域的變量的函數，建立閉包的常見方式就是在一個函數內部建立另外一個函數，就是咱們上面說的內部函數，因此剛纔說的不是廢話，也是閉包相關的 ^_^

九、變量的做用域

內部函數也能夠有本身的變量，這些變量都被限制在內部函數的做用域中：

function outerFn() {
    document.write("Outer function<br/>");
    function innerFn() {
        var innerVar = 0;
         innerVar++;
         document.write("Inner function\t");
         document.write("innerVar = "+innerVar+"<br/>");
     }
     return innerFn;
}
        var fnRef = outerFn();
        fnRef();
        fnRef();
        var fnRef2 = outerFn();
        fnRef2();
        fnRef2();

每當經過引用或其它方式調用這個內部函數時，就會建立一個新的innerVar變量，而後加1，最後顯示

Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1

內部函數也能夠像其餘函數同樣引用全局變量：

var globalVar = 0;
function outerFn() {
    document.write("Outer function<br/>");
    function innerFn() {
        globalVar++;
        document.write("Inner function\t");
        document.write("globalVar = " + globalVar + "<br/>");
    }
    return innerFn;
}
 var fnRef = outerFn();
 fnRef();
 fnRef();
 var fnRef2 = outerFn();
 fnRef2();
 fnRef2();

如今每次調用內部函數都會持續地遞增這個全局變量的值：

Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4

可是若是這個變量是父函數的局部變量又會怎樣呢？由於內部函數會引用到父函數的做用域（有興趣能夠了解一下做用域鏈和活動對象的知識），內部函數也能夠引用到這些變量

function outerFn() {
   var outerVar = 0;
    document.write("Outer function<br/>");
    function innerFn() {
        outerVar++;
        document.write("Inner function\t");
        document.write("outerVar = " + outerVar + "<br/>");
    }
    return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();

這一次結果很是有意思，也許或出乎咱們的意料

Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2

咱們看到的是前面兩種狀況合成的效果，經過每一個引用調用innerFn都會獨立的遞增outerVar。也就是說第二次調用outerFn沒有繼續沿用outerVar的值，而是在第二次函數調用的做用域建立並綁定了一個一個新的outerVar實例，兩個計數器徹底無關。

當內部函數在定義它的做用域的外部被引用時，就建立了該內部函數的一個閉包。這種狀況下咱們稱既不是內部函數局部變量，也不是其參數的變量爲自由變量，稱外部函數的調用環境爲封閉閉包的環境。從本質上講，若是內部函數引用了位於外部函數中的變量，至關於受權該變量可以被延遲使用。所以，當外部函數調用完成後，這些變量的內存不會被釋放（最後的值會保存），閉包仍然須要使用它們。

10.閉包之間的交互

當存在多個內部函數時，極可能出現意料以外的閉包。咱們定義一個遞增函數，這個函數的增量爲2

function outerFn() {
       var outerVar = 0;
       document.write("Outer function<br/>");
       function innerFn1() {
           outerVar++;
           document.write("Inner function 1\t");
           document.write("outerVar = " + outerVar + "<br/>");
       }

       function innerFn2() {
           outerVar += 2;
           document.write("Inner function 2\t");
           document.write("outerVar = " + outerVar + "<br/>");
       }
       return { "fn1": innerFn1, "fn2": innerFn2 };
}
var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();
var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();

咱們映射返回兩個內部函數的引用，能夠經過返回的引用調用任一個內部函數，結果：

Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4

innerFn1和innerFn2引用了同一個局部變量，所以他們共享一個封閉環境。當innerFn1爲outerVar遞增一時，久違innerFn2設置了outerVar的新的起點值，反之亦然。咱們也看到對outerFn的後續調用還會建立這些閉包的新實例，同時也會建立新的封閉環境，本質上是建立了一個新對象，自由變量就是這個對象的實例變量，而閉包就是這個對象的實例方法，並且這些變量也是私有的，由於不能在封裝它們的做用域外部直接引用這些變量，從而確保了了面向對象數據的專有性。

11.解惑

如今咱們能夠回頭看看開頭寫的例子就很容易明白爲何第一種寫法每次都會alert 4了。

for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() { alert(i); }
}

上面代碼在頁面加載後就會執行，當i的值爲4的時候，判斷條件不成立，for循環執行完畢，可是由於每一個span的onclick方法這時候爲內部函數，因此i被閉包引用(閉包引用傳的是引用)，內存不能被銷燬，i的值會一直保持4，直到程序改變它或者全部的onclick函數銷燬（主動把函數賦爲null或者頁面卸載）時纔會被回收。這樣每次咱們點擊span的時候，onclick函數會查找i的值（做用域鏈是引用方式），一查等於4，而後就alert給咱們了。

而第二種方式是使用了一個當即執行的函數又建立了一層閉包，函數聲明放在括號內就變成了表達式，後面再加上括號括號就是調用了，這時候把i當參數傳入，函數當即執行，num保存每次i的值。

這一通下來想必你們也和我同樣，對閉包有所瞭解了吧，固然徹底瞭解的話須要把函數的執行環境和做用域鏈搞清楚 ^_^