什麼是閉包？聊聊javascript中閉包，看看閉包有哪些作用？

在前端學習的過程中，我們難免會遇到許許多多的問題，那麼今天我們來以一個初學者的角度來談談兩個問題：

什麼是閉包？

閉包有哪些作用？

其實我們在學習javascript的時候閉包無所不在，你只需要能夠辨識並接受它。閉包並不是一個需要學習的新的語法或模式才能使用的工具，閉包是基於詞法作用域書寫程式碼時所產生的自然結果。我們幾乎不用在寫程式碼時刻意去創建閉包。

相信此時已經有不少小夥伴心裡在嘀咕，這詞法作用域有是個啥，不用慌，且聽我緩緩道來，簡而言之，詞法作用域就是定義在詞法階段的作用域。換句話說，詞法作用域是由你在寫程式碼時將變數和區塊級作用域寫在哪裡決定的，因此當詞法分析處理器處理程式碼時會保持作用域不變（大部分情況是這樣的） 。 ——《你不知道的javascript上卷》

先來個例子

function test(){
   var arr = []
   for(var i=0;i<10;i++){
       arr[i]=function(){
           console.log(i);
       }
   }
   return arr
}

var myArr = test()
// myArr[0]()
// myArr[1]()
// ...

for(var j = 0; j < 10; j++){ 
   myArr[j]()
}
//為了避免繁瑣此處使用了第二個循環來調用test函數裡第一個循環裡函數的打印出十個結果

我們先來分析一下這段代碼： 當這段代碼執行時，按照常理分析應該是依序印出0~9，十個數字；但是for迴圈運行時不需要時間（以微秒計算忽略不計），當函數test，return arr時，arr[]裡面是10個function(){console. log(i);}，此時陣列裡的函數沒有執行，當var myArr = test()呼叫test函數時，由於for迴圈執行的時間忽略不計，所以此時i已經是10，所以印出的是10個10。

相信此時就會有人問，這與我們要講的閉包又有什麼關係呢，那如果我們把這段程式碼稍微修改一下，改變成一個累加器，要如何實現他呢？

相信此時會有大佬表示那還不簡單嗎？

把var定義改成let定義，使得第一個for迴圈成為一個區塊級作用域，那麼就可以變成累加器了。當然是沒有問題的，

但我們今天講的是在ES5的時候如何實作累加器。那我們再看看下面這段程式碼：

function test(){
    var arr = []
    for(var i=0;i<10;i++){
        (function(j){
            arr[j]=function(){
                console.log(j);
            }
        })(i)
    }
    return arr
}

var myArr = test()

for(var j = 0; j < 10; j++){ 
    myArr[j]()
}

細心地朋友一定會發現，這不就是把在迴圈裡面的函數體改成一個自執行函數嘛，但是此時輸出的結果就是從0~9依序輸出十個數字，而這裡面就包含了閉包，當我們開始執行這段程式碼的時候第二個for迴圈會呼叫十次，當每個自執行函數執行時會創建一個自執行函數的AO對象，這個自執行函數的AO對象裡就存在一個屬性名為j，照常理而言自執行函數執行完畢之後，它的AO對象就應該被銷毀了，但是當myarr[j] ()執行時，現在作用域鏈頂端的arr[j]的AO對象裡找屬性名j，但是沒有找到，順著作用域鏈往下找，在自執行函數的AO物件裡找到了，所以當自執行函數結束時，它的AO物件並不會被垃圾回收機制回收，否則當myarr[j] ()執行時就會報錯，此時就形成了閉包。

當一個函數被保存到了外部，將會產生閉包

我們再來舉個例子

function a(){
    function b(){
        var bbb = 234
        console.log(aaa);
    }
    var aaa = 123
    return b // b出生在a裡面，但是被保存出去了}

var glob = 100
var demo = a()
demo()

這段程式碼我們先用預編譯來分析，首先是定義一個全局的GO對象，在找全局的聲明找全局變數聲明，將變數宣告為GO 的屬性名，值為undefined，在全域找函數聲明，將函數名稱作為GO 物件的屬性名，值賦予函數體。此時應該為GO{ glob: undefined--->100 ; demo: undefined ; a: fa(){} }; 再對函數a建立一個AO{ aaa：undefined--->123;b: fb() {} },最後再對函數a裡面的函數b進行預編譯創建一個b的AO{ b: undefined--->234};此時作用域鏈的順序為1. 函數b的AO物件；2.函數a的AO物件；3. 全域GO物件。當我們印函數b裡面的aaa時，先從作用域鏈的頂端開始找，在函數b的AO物件裡沒有aaa，那就會順著作用域鏈往下找，找到第二層函數a的AO物件是找到了aaa的值為123，輸出結果。

如果我們沒有從預編譯的角度去分析就會認為此時的aaa應該會報錯的，當var demo = a()執行時，當a函數執行結束，那麼a對應的AO對象應該被銷毀了，照常理分析當我們執行demo時作用域鏈此時應該會創建b的AO對象和GO對象，此時只有b的AO對象，沒有a的AO對象，應該不能打印出aaa的值，但是此時aaa的值為123，則表示a的AO物件沒有被銷毀，那為什麼呢？原因就在於這裡創建了閉包，當var demo = a()執行結束之後，垃圾回收機制會來問，a函數老兄，我看你都執行完畢了，你的運行內存是不是可以給我釋放了，但此時a函數只能無奈搖搖頭說道，老哥，我也不確定我有沒有執行完畢，我執行完創建了一個b，但是b又不歸我管，所以我也不確定b有沒有被調用，所以我也不確定我有沒有執行完畢，垃圾回收機制想了想，既然你都不知道那我就不回收了，要是回收了還沒執行完的就該報錯了，所以此時a的AO物件就沒有被回收。

補充全面一點就是：當一個函數內部的函數被儲存到函數外部時，就會產生閉包。

相信透過這兩個例子，你已經對閉包有了一個大概的了解，那接下來我們說一下閉包有哪些作用。

閉包的作用

• 1. 實現公有變數例如：累加器（3.js）
• 2. 做快取
• 3. 可以實現封裝，屬性私有化
• 4. 模組化開發，防止污染全域變數

我們對閉包的作用也來一個例子（3.js）

var count = 0
 function add() {
   return count++
 }
 console.log(add());
 console.log(add());
 console.log(add());

這是一段比較普通的累加的程式碼，但是如果我們在實習甚至是工作的時，公司要求你把累加器封裝成一個模組化的程式碼，那麼此時，為了模組化我們盡可能避免定義全域變量，但是不定義全域變數我們如何實作呢，此時我們就可以用到閉包了；

function add() {
    var count = 0
    function a() {
      ++count
      console.log(count);
    }
    return a
  }
  var res = add()
  res()
  res()
  
  //add函數結束之後，add的AO物件沒有被銷毀，因為add函數執行完了之後，傳回的a不知道是否被呼叫就形成了閉包，這樣就能使得不使用全域變數也能封裝成一個模組化的累加器。

結語

那麼關於閉包以及閉包的作用相關的一些個人見解就是這些，目前對於閉包也只是一些淺顯的了解，後期學習之後完善過後會出後續關於閉包的相關文章，感謝您的觀看，歡迎批評斧正，一起共同進步。