做用域閉包

在講解做用域閉包的內容以前，須要對如下概念有所掌握：

1. JavaScript具備兩種做用域：全局做用域和函數做用域，至於塊做用域也不能說沒有，好比說： try ...catch...語句中，catch分句就是塊做用域，還有with語句等。

2. ES6中的let關鍵字，能夠用來在任意代碼塊中聲明變量。

3. 什麼事當即執行函數表達式以及它的做用。

老生常談什麼是閉包

閉包的概念：函數能夠記住並訪問所在的詞法做用域時，即便函數是在當前詞法做用域以外執行，這時就產生了閉包。

function foo(){
        var a = 2;
        function bar(){
            console.log(a);
        }
        return bar;
    }
    var baz = foo();
    baz(); //這就是閉包的效果

函數bar()的詞法做用域可以訪問foo()的內部做用域，而後咱們將bar()函數自己看成一個值進行傳遞。在foo()執行後，其返回值賦值給變量baz並調用baz()。
在foo()執行後，一般會期待foo()的整個內部做用於都被銷燬，由於咱們知道引擎有垃圾回收機制來釋放不在使用的內存空間。因爲看上去foo()的內容不會再被使用，因此很天然地會考慮對其進行回收。
可是，閉包的神奇之處在於能夠阻止這件事情發生。事實上內部做用域依然存在，所以，沒有被回收。那麼是誰在使用這個內部做用域呢？固然是bar()在使用。
因爲bar()聲明在foo()函數內部，因此它擁有涵蓋foo()內部做用域的閉包，使得該做用域可以一直存活，以便bar()在之後的任什麼時候間進行引用。
bar()函數在foo()調用完成後，依舊持有對其做用域的引用，而這個引用就叫作閉包

固然，不管使用何種方式對函數類型的值進行傳遞，當函數在別處調用時均可以觀察到閉包

function foo(){
        var a = 2;
        function baz(){
            console.log(a)//2
        }
        bar(baz);
    }
    function bar(fn){
        fn(); //這就是閉包
    }

相比於上面代碼的枯燥，這有一個更加常見的例子

function wait(message){
        setTimeout(function time(){
            console.log(message);
        }, 1000);
    }
    wait("hello clousre");

簡單分析一下這段代碼：咱們將一個名爲time的內部函數傳遞給setTimeout(),time具備涵蓋wait()做用域的閉包，所以，還保有對變量message的引用。
wait(..)執行1000ms後，它的內部做用域並不會消失，time()函數依舊保有對wait()做用域的閉包，在引擎內部，內置的工具函數setTimeout()會持有一個對參數的引用，這個參數也許叫做fn或者func之類的。引擎會調用這個函數，而詞法做用域在這個過程當中保持完整。
這就是閉包

那麼閉包有哪些應用呢？其實包括定時器，事件監聽器，Ajax請求，跨窗口通訊，Web Workers或者任何其餘的異步(或者同步)任務中，只要使用回掉函數，實際上就是在使用閉包!

這裏咱們再看一個特別典型閉包的例子，但嚴格來講它並非閉包。

var a = 2;
(function IIFE(){
    console.log(a)
})();

IIFE即當即執行函數表達式，第一個（）讓函數變爲函數表達式，第二個（）函數執行。爲何說他嚴格上來說並非閉包呢？由於在示例代碼中函數並非在它自己的詞法做用域以外執行的，它在其定義時所在的做用域執行，a是經過詞法做用域查找到的，並非閉包發現的。
儘管IIFE自己並非觀察閉包的恰當例子，但他的確建立了一個封閉的做用域，而且也是最經常使用來建立被封閉起來的閉包的工具。

循環和閉包

說到閉包咱們接觸最先的也許就是for循環的例子：

for(var i = 1; i<6; i++){
        setTImeout(function time(){
            console.log(i)
        }, i*1000)
    }

記得第一次看見這段代碼的時候，那是被深深的虐到，做爲C語言起手的同窗，當時真的是一臉的懵逼，爲何會輸出5個6， 爲何會輸出5個6，爲何？當時其餘人的講解也是模模糊糊的，雖然提出瞭解決方法，當仍是沒法理解這其中的機制原理，因此，我痛下決心把它弄懂！也許只有我不懂吧！

問：爲何會輸出66666呢？
答：能輸出66666說明for循環內部的代碼的確執行了5次。
問：那6是從哪來的呢？
答：6是咱們循環的終止條件，因此輸出6。
問：那爲何不是循環一次，輸出一個值， 1，2，3，4，5這樣呢？
答：setTimeout()函數是在循環結束時執行的，就算是你設置setTimeout(fn, 0),它也是在for循環完成後當即執行，總之就是在for循環執行完成後才執行。

好了，這就不難理解了爲何會輸出66666了。但這也就引出了一個更深刻的話題，代碼中到底什麼缺陷致使它的行爲同語義暗示的不一致呢？

缺陷是：咱們試圖假設循環中的每一個迭代在運行時都會給本身「捕獲」一個i的副本。可是根據做用域的工做原理，實際狀況是儘管循環中的五個函數是在各個迭代中分別定義的，可是它們都被封閉在一個共享的全局做用域中，所以實際上只有一個i。因此，實際的樣子是這樣。

而咱們想象中的樣子確是這樣。

下面回到正題。既然明白了缺陷是什麼，那麼要怎樣作才能達到咱們想象中的樣子呢？答案是咱們須要在每一次迭代的過程當中都建立一個閉包做用域。在上文中咱們已經有所鋪墊，IIFE會經過聲明當即執行一個函數來建立做用域。so咱們能夠將代碼改爲下面的樣子：

for(var i=1; i<6; i++){
        (function(){
            setTImeout(function time(){
                console.log(i)
            }, i*1000)
        })();
    }

這樣每一次迭代咱們都建立了一個封閉的做用域(你能夠想象爲上圖中黃色的矩形部分)。可是這樣作仍舊不行，爲何呢？由於雖然每一個延遲函數都會將IIFE在每次迭代中建立的做用域封閉起來，但咱們封閉的做用域是空的，因此必須傳點東西過去才能實現咱們想要的結果。

for(var i=1; i<6; i++){
        (function(){
            var j = i
            setTImeout(function time(){
                console.log(j)
            }, j*1000)
        })();
    }

ok!試試如今他能正常工做嗎？對這段代碼再進行一點改進

for(var i=1; i<6; i++){
        (function(j){
            setTImeout(function time(){
                console.log(j)
            }, j*1000)
        })(i);
    }

總的來講，就是在迭代內使用IIFE會爲每一個迭代都生成一個新的做用域，使得延遲函數能夠將新的做用域封閉在每一個迭代內部，咱們同時在迭代的過程當中將每次迭代的i值做爲參數傳入進新的做用域，這樣在迭代中建立的封閉做用域就都會含有一個具備正確值的變量供咱們訪問。ok,it's work!

塊做用域

仔細思考咱們前面的解決方案。咱們使用IIFE在每次迭代時都建立一個新的做用域。也就是說，每次迭代咱們都須要一個塊做用域。前面咱們提到，你須要對ES6中的let關鍵字進行了解，它能夠用來劫持塊做用域，而且在這個塊做用域中聲明一個變量。
本質上來說它是將一個塊轉換成能夠被關閉的做用域。

for(var i=1; i<6; i++){
            let j = i; //閉包的塊做用域
            setTImeout(function time(){
                console.log(j)
            }, j*1000)
    }

若是將let聲明在for循環的頭部那麼將會有一些特殊的行爲，有多特殊呢？它會指出變量在循環過程當中不止被聲明一次，每次迭代都會聲明。隨後的每一個迭代都會使用上一個迭代結束時的值來初始化這個變量。無論這句話有多拗口，看看代碼吧！

for(let i=1; i<6; i++){
            setTImeout(function time(){
                console.log(i)
            }, i*1000)
    }

有沒有似曾相識的感受，有沒有感動到,我已經老淚縱橫了。。。

下一節講閉包運用--模塊機制