談談閉包

寫在前面：本文案例除特別指明，默認基於chrome mac版。你可能想：閉包麼難道還有瀏覽器差別麼？！嘿嘿，你且看來：

按個人理解，閉包就是能夠在函數外面訪問其內部變量的一種方式。由於你們都知道，javascript執行時遵循一個隱式的做用域鏈，查詢變量的值時將沿做用域鏈一路向上查找。
先看看常規方法和閉包的不一樣：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
var i='global';var func=function(){ console.log(i);}func();

此時的輸出爲'global'。

這就是常規做用域鏈的最簡單的例子，當咱們在執行func()方法時，由於其內部並無定義i，因此它開始向上查找i值，最終在全局環境中找到i.

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
var i='global';function constfuncs(){ var i=10; var func=function(){ console.log(i); } return func;}var f=constfuncs();f();

此時的輸出爲10。

此例中f函數和上例中的func函數同樣，在執行時都沒有在自身的上下文中找到i值。但不一樣的是，func函數向上一級查找是到全局環境，而此例中f方法卻找到了constfuncs中。啊哈，這就是今天講的閉包。閉包能夠訪問到另外一個函數的局部變量呢～
在js中，若是函數執行完，正常狀況下，該函數的局部變量將被銷燬，外界並不會訪問到該函數中的局部變量，好比：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function a(){ var i=10; console.log(i);//10}console.log(i);//undefined

可是本例中的constfuncs由於返回了一個函數變量，且該函數變量中又引用了constfuncs函數中的i，因此此時constfuncs在執行結束後，其中的變量並不會被銷燬，而是要爲它返回的函數"留着"。

且看下面的截圖：
當f函數執行到console.log(i)時，它對應的上下文在調試器中很是清楚：Local指該函數的局部變量，Closure指的就是閉包變量，而Global爲全局變量。此時找i值的順序就是Local || Closure || Global
若是i值不是一個恆定的值，而是在外層函數執行中進行了一系列的變化，那麼當調用返回的函數時，又執行了什麼操做呢？

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { funcs[i] = function () { return i; } } return funcs;}var funcs = constfuncs();alert(funcs[1]());

此時的輸出爲10.

其實仔細來推敲一下，當向funcs數組添加項時，每項都是function(){console.log(i)}，這裏i值只是簡單指向外層的i值。當funcs1執行時，用到i值了，它開始去找閉包變量中的i，而此時i值已經固定，爲10。因此，無論執行funcs中的哪一項，它用到i值時，都只能獲得最終的i值。
打斷點看清函數在執行時的上下文：Closure中的i值爲10。

那麼如何才能使funcs中的每項執行的時候，能用到"被定義時的真實環境"信息呢？也就是，"切斷"與初始值i的一些聯繫，由於i最後又只是一個最終值....看下面 這樣行不行：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { var v = i; funcs[v] = function () { return v; }; } return funcs;}var funcs = constfuncs();console.log(funcs[1]());

我沒獲得一個i值就把它存成v，而後使用v來給funcs賦值，最後我再執行funcs中的函數時，不就不去訪問i了嘛？就是訪問v了，而每次都新建一個v呢～若是外層函數constfuncs每次都由於閉包的緣由把v存起來，我最後不是會有不少個v嘛？我好聰明耶！我都腦洞大開想了一通了，來實踐一下：

結果....結果很讓我失望，輸出了9.....囧

爲啥呢？
回頭又仔細推敲下我剛纔說的，存不少個v？？

人家爲啥要給你存不少個 v啊？當constfuncs函數結束執行後，它會把閉包中要用到的變量存起來沒錯，可是人家不能記着執行過程都給你存着。注意：我之因此作這個實驗是由於v和i我認爲是不一樣的，v是每次都新建一個，而i值是重複改寫。瀏覽器說，你再來感覺下：

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function constfuncs() { var i=10,j=30; var func=function(){ return i; } return func;}var f = constfuncs();console.log(f());

這裏又展示出了瀏覽器的不妥協：我不光給你存個最終值，我連你用不到的值也不存。額...你好機智..
等等，咱們看看其餘瀏覽器的處理，safari是這樣的：

firefox和chrome是同樣的處理方式，即能少則少：

說了這麼多，咱們還沒達到目的呢，剛纔那個方法仍是被i牽着鼻子走呢？再來！

 
 
 
 
 

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

 
 
 
 
 
function construct(v) { return function(){ return v; }}function constfuncs() { var funcs = []; for (var i = 0; i < 10; i++) { funcs[i] = construct(i); } return funcs;}var funcs = constfuncs();console.log(funcs[4]());

哇哈！輸出4!

這裏的關鍵在於，我把i做爲參數傳給construct函數聲稱了一個新函數並賦予funcs中的每一項，而construct返回的每一個函數都是有其單獨的閉包環境的，就是construct構造的閉包環境啦。且看：

因此，當閉包造成時，全部被用到的局部變量都被保存，參數也是如此。

總結

＊ 閉包，能夠說是一個封閉的環境，對外給出的函數就像一個口子，打開閉包外訪問內部的一個門。
＊ 當閉包會保存外部可能訪問到的其內部的一切值，固然包含其外層函數的參數。
＊ 根據瀏覽器的不一樣，當產生閉包時，值的保留有些會所有保留(如safari)，有些會保留用到的值(如chrome 和 firefox) 。

感謝看到最後～本人不才，還望能助你理解一二。若有不一樣看法，還請留言。

來自爲知筆記(Wiz)