什麼是閉包？聊聊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不知道是否被呼叫就形成了閉包，這樣
  就能使得不使用全域性變數也能封裝成一個模組化的累加器。

結語

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

【相關推薦：、】

以上就是什麼是閉包？聊聊javascript中閉包，看看閉包有哪些作用？的詳細內容，更多請關注TW511.COM其它相關文章！