js閉包的本質

爲何會有閉包

js之因此會有閉包，是由於js不一樣於其餘規範的語言，js容許一個函數中再嵌套子函數，正是由於這種容許函數嵌套，致使js出現了所謂閉包。

function a(){
    function b(){
    
    };
    b();
}
a();

在js正常的函數嵌套中，父函數a調用時，嵌套的子函數b的結構，在內存中產生，而後子函數又接着調用了，子函數b就註銷了，此時父函數a也就執行到尾，父函數a也會把本身函數體內調用時生成的數據從內存都註銷。

function a(){
    function b(){
    
    }
    return b;
}
var f=a();

這個例子中，父函數調用時，函數體內建立了子函數b，可是子函數並無當即調用，而是返回了函數指針，以備「往後再調用」，由於「準備往後調用」，此時父函數a執行完了，就不敢註銷本身的做用域中的數據了，由於一旦註銷了，子函數b往後再調用時，沿着函數做用域鏈往上訪問數據，就沒有數據能夠訪問了，這就違背了js函數做用域鏈的機制。

正所以，子函數要「往後調用」，致使父函數要維持函數做用域鏈，而不敢註銷本身的做用域，那麼這個子函數就是「閉包函數」。

閉包函數在形式上有不少種。

在這個例子中，父函數v()體內定義了好幾種子函數，這些子函數有的是異步事件的回調函數，會進入瀏覽器的事件循環池，等主線程工做結束後往後再調用這些回調函數，這些子函數，都致使父函數調用完了，不敢註銷本身的做用域，所以這些子函數都是閉包函數。

js並非爲了創造閉包而創造，徹底只是由於js容許函數嵌套，js函數嵌套還有個函數做用域鏈的機制，讓父函數不敢註銷本身做用域中的數據，纔會產生所謂閉包。

也正由於這個閉包的特性，閉包函數可讓父函數的數據一直駐留在內存中保存，從而這也是後來js模塊化的基礎。

閉包與函數做用域

若是僅僅只是有函數嵌套，而沒有函數做用域鏈，也或許不會有閉包。理解js函數做用域相當重要。

function a(){

}

函數的做用域其實是個動態概念，上面的代碼，只是定義了一個函數，並無調用函數，函數的做用域是不存在的。只有函數a調用時，纔會在內存中動態開闢一個本身的做用域，函數調用完了這個做用域又關閉了，函數運行過程當中在內存建立的數據又被清除了。

function a(){
    var n=1;
    function b(){
        n++;
        console.log(n);
    }
    b();
    b();
    b();
}
a();

這個例子中，父函數a調用，首先在內存中動態開闢了做用域，而後在運算過程當中，定義了函數b，子函數b()每次調用，都會開闢本身的做用域，在本身的做用域內進行運算，運算過程當中訪問了還處於打開狀態的父函數做用域中的變量n的值，這個子函數三次調用，每次調用時候本身子做用域，訪問的都是同一個變量n。可是父函數a總有執行完的時刻，總有要關閉做用域的時候。

var q='';
function a(){
    var n=1;
    q=function b(){
        n++;
        console.log(n);
    }
}
a();
q();
q();
q();

這個例子中，運行父函數，函數開啓了做用域，運算過程當中生成了函數b，子函數b賦給了全局變量q，致使父函數a運行完了，不敢關閉本身的做用域，,讓子函數b成了閉包函數，全局變量q持有了這個閉包函數。

這個獲得的結果，和上面例子中常規函數嵌套，獲得的效果是同樣的。可是區別在於，前一個例子中，父函數a即使執行萬年，也有結束要關閉做用域的時候，而這個閉包，就讓它的父函數做用域永恆了。

實際上在js的做用域機制中，有一個做用域是永恆的，就是window全局做用域，只要瀏覽器窗口不關閉，這個windows全局做用域就是永恆的，在全局做用域中定一個函數，不管調用幾回，這幾回調用均可以共享操做同一個全局變量。除了window做用域能夠永恆，其餘的函數做用域，總有關閉的時候而沒法永恆。只有閉包函數，可讓它的父函數做用域永恆，像windows全局做用域，一直在內存中存在。

當閉包函數調用時，它會動態開闢出本身的做用域，在它之上的是父函數的永恆做用域，在父函數做用域之上的，是window永恆的全局做用域。閉包函數調用完了，它本身的做用域關閉了，從內存中消失了，可是父函數的永恆做用域和window永恆做用域還一直在內存是打開的。閉包函數再次調用時，還能訪問這兩個做用域，可能還保存了它上次調用時候產生的數據。只有當閉包函數的引用被釋放了，它的父做用域纔會最終關閉（固然父函數可能建立了多個閉包函數，就須要多個閉包函數所有釋放後，父函數做用域纔會關閉）。

這個例子是閉包函數的一個典型應用，示例中只有兩個函數嵌套，可是加上window全局做用於，一共會有三個嵌套做用域。其中for循環了三次，三次調用了匿名自執行函數，就開了三個函數做用域，開第一個做用域時保存的i的值是0，開第二個做用域保存的是1，第三個保存的是2。三次調用父函數，又建立了三個閉包函數，每一個閉包函數沿着它本身的做用域鏈向上訪問，訪問的值就都不相同。三個閉包函數調用完了，它們本身的做用域就關閉了，可是各自的父函數做用域還一直在內存中處於打開狀態，下次閉包函數再調用時，再接着訪問它本身的做用域。就像在window全局做用域定義了一個函數，函數調用幾回，全局做用域都在，每次調用都接着訪問全局做用域。

閉包與js模塊化

平常編碼中有不少地方會不經意用到了閉包只是沒有察覺，使用閉包的做用就是爲了兩點：造成命名空間同時保存數據。

在HTML中引入多個js文件，瀏覽器會從第一個執行到最後一個，這些js文件都共用一個全局做用域，這不少時候就會致使命名衝突。而若是隻是爲了命名空間，匿名自執行函數也能夠實現。

(function(){
    var a=1;
})()
alert(a);//訪問不到變量a的值，會報錯變量a未定義

這個例子中就藉助匿名自執行函數實現了命名空間，隔離了數據，不會產生衝突，可是僅僅只是把數據封起來不提供接口有些時候或許也不行，所以這就須要閉包。

這個例子在前一個例子基礎上進行了改造，a.js文件中就使用了閉包，不管這個文件引入到哪裏，它的數據都是隔離的，不會會任何地方的代碼產生衝突，同時它提供了閉包函數做爲API接口，讓其餘地方以指定的方式訪問數據，獲得須要的結果，其餘地方也不須要關心閉包結構裏的數據是什麼或者怎麼操做的，也不須要擔憂引入它會與本身的代碼衝突。

require.js的本質就是如此，每一個模塊文件就是一個大閉包。

是否使用閉包要考慮兩點：隔離和數據保存。若是須要隔離數據造成命名空間，可使用匿名自執行函數。若是須要隔離數據，同時還須要在隔離狀態保存數據，保存了後面還能夠繼續使用，那就可使用閉包。若是都不須要，那就使用普通函數，函數調用完做用域就關閉數據就釋放了，沒有保存，數據不存在了也不須要隔離了。

一個實際應用

淘寶的購物車中，一個商品點擊新增數量或減小數量，它會往服務器發送一個請求保存新數量，可是若是快速連續點擊，淘寶的購物車並無跟隨快速點擊連續發送ajax，而是在連續點擊的結束以後才發送了一個請求，把用戶真正想要的數量最後才用一個請求發送了服務器，這樣就減小了沒必要要的請求減小服務器的壓力。

若是隻是單純用個click事件處理函數，而後把ajax放處處理函數中，點一次按鈕就會發一次請求，連續點就會連續發。而要實現淘寶的這個效果，它要的原理是，定一個延時時間，比方1秒，單擊以後過1秒種才發請求，而若是單擊了以後尚未到1秒又連續單擊了，那麼重置這個計時，快速連續單擊就一直再重置這個計時始終都沒有達到一秒，就不會由於連續點擊而發送請求，直到最後連續點擊停下來了，過了一秒才發一個請求。

這個應用中就藉助了閉包函數，實際click事件真正執行的用於發送請求的也就是裏面嵌套的紅框的閉包函數，每一次單擊都會執行這個紅框函數，它除了最終發送ajax，還要作個判斷，若是上一次點擊的時間，到這一次又點擊的時間，這之間的間隔小於了指定的1秒，那麼就不會發送ajax，同時重置這個計時。而在最初第一次單擊的時候，它還須要上一次的時間，這個時間就只能在初始化時候用一個變量保存一個當前時間，而後第一次單擊時候的時間與變量保存的時間進行一個對比。單擊第二次時，那麼該變量又保存了第一次單擊時的時間，而後第二次單擊的時間又與第一次單擊的時間進行比較。

關鍵也就在於須要個變量保存上一次的時間。這時間不借助閉包函數也徹底能夠，就把這個變量放在全局環境下，在全局環境下定義一個全局變量startTime，反正就是保存一下上一次單擊的時間。可是問題在於，購物車中有多個商品，並不會有隻有一個單擊按鈕須要用到這個，多個按鈕要用，給每一個按鈕都定義全局變量，startOne，startTwo,startThree...那就很麻煩，而且經過json渲染多個商品時候也不可能手動去定義這麼多變量。這就必需藉助閉包函數。

json在渲染多個商品時按鈕時，這個debounce函數就會被屢次調用，每一次調用都return返回了一個閉包函數給每一個商品的button按鈕的click做爲其處理函數，那麼每一個處理函數都有一個專屬的永恆父做用域，而且裏面都已經自動定義了各自須要使用的startTime變量用於保存每一個按鈕本身計算時使用的上一次單擊的時間。經過閉包解決這個問題這就很是方便。

額...

上面一個經過for()循環建立多個閉包函數，內存開多個做用域來保存不一樣的數據，不必定是最好的實現。這個例子中，一樣是for循環建立三個了函數，但三個函數都是普通函數。因爲函數在js中也是對象，所以給函數自己建立一個靜態屬性來保存不一樣的值，那麼for循環建立的三個普通函數，每一個函數的靜態屬性都保存了不一樣的值，而沒必要藉助閉包結構保存不一樣的值，能夠減小內存消耗。