js學習之深入理解閉包

閉包算是js裡面比較不容易理解的點，尤其是對沒有程式基礎的人來說。

其實閉包要注意的就那麼幾條，如果你都明白了那麼征服它並不是什麼難事兒。下面就讓我們來談談閉包的一些基本原理。

 閉包的概念

一個閉包就是一個函數和被創建的函數中的作用域物件的組合。 （作用域對像下面會說）

通俗一點的就是“ 只要一個函數中嵌套了一個或多個函數，那麼我們就可以稱它們構成了閉包。 ”

類似這樣：

function A() {
 var i = 5;
 return function() {
  console.log('i = '+i);
 }
}
 
var a = A();
a(); // i = 5

   

閉包的原理

1、外部函數的局部變數若會被閉包函數呼叫就不會在外部函數執行完畢之後立即被回收。

我們知道，不管什麼語言，作業系統都會存在一個垃圾回收機制，將多餘分配的空間回收掉以便減小記憶體。而函數的生命週期的是從呼叫它開始的，當函數調用完畢的時候函數內部的局部變數等都會被回收機制回收。

我們拿上述例子來說，當我們的外部函數A調用完畢時，A中的局部變數i按理說就會被作業系統回收而不存在，但是當我們用了閉包結果就不是那樣了， i並不會被回收。試想，如果i被回收了那麼回傳的函數裡面豈不是就是印出undefined了？

i為什麼沒有被回收？

在javascript執行一個函數的時候都會創建一個作用域對象，將函數中的局部變數（函數的形參也是局部變數）保存進去，伴隨著那些傳入函數的變數一起被初始化。

所以當調用A的時候就創建了一個作用域對象，我們姑且稱之為Aa，那麼這個Aa應該是這樣的： Aa { i: 5; };  在A函數返回一個函數之後，A執行完畢。 Aa物件本來應該被回收，但由於傳回的函數使用了Aa的屬性i，所以傳回的函數儲存了一個指向Aa的引用，所以Aa不會被回收。

所以理解作用域對象，就能理解為什麼函數的局部變數在遇到閉包的時候不會在函數調用完畢時立即被回收了。

再來個例子：

function A(age) {
 var name = 'wind';
 var sayHello = function() {
  console.log('hello, '+name+', you are '+age+' years old!');
 };
 return sayHello;
}
var wind = A(20);
wind(); // hello, wind, you are 20 years old!

   

你能說出的它的作用域對象Ww是什麼嗎？

Ww{ age: 20; name: 'wind'; };

2、每調用一次外部函數就產生一個新的閉包，以前的閉包依舊存在且互不影響。

3、同一個閉包會保留上一次的狀態，當它被再次呼叫時會在上一次的基礎上進行。

每呼叫一次外部函數產生的作用域物件都不一樣，你可以這樣想，上面的例子，你每次傳入的參數age不一樣，所以就每次生成的物件不一樣。

每呼叫一次外部函數那麼就會產生一個新的作用域物件。

function A() {
 var num = 42;
 return function() { console.log(num++); }
}
var a = A();
a(); // 42
a(); // 43
 
var b = A(); // 重新调用A()，形成新闭包
b(); // 42

   

這個程式碼讓我們發現了兩件事，一、當我們連續調用兩次a();，num會在原基礎上自加。說明同一個閉包會保留上一次的狀態，當它被再次呼叫時會在上一次的基礎上進行。 二、我們的b();的結果為42，表示它是新的閉包，並且不受其他閉包的影響。

我們可以這樣想，就好比我們吹肥皂泡一樣，我每次吹一下（調用外部函數），就會產生一個新的肥皂泡（閉包），多個肥皂泡可以同時存在且兩個肥皂泡之間不會互相影響。

4、在外部函數中存在的多個函數 「 同生共死 」

以下三個函數被同時宣告並且都可以對作用域物件的屬性（局部變數）進行存取與操作。

var fun1, fun2, fun3;
function A() {
 var num = 42;
 fun1 = function() { console.log(num); }
 fun2 = function() { num++; }
 fun3 = function() { num--; }
}
 
A();
fun1();  // 42
fun2();
fun2();
fun1();  // 44
fun3();
fun1();  //43
 
var old = fun1;
 
A();
fun1();  // 42
old();  // 43  上一个闭包的fun1()

   

由於函數不能有多個回傳值，所以我用了全域變數。我們再次可以看出在我們第二次呼叫A()時產生了一個新的閉包。

當閉包遇到循環變數

當我們說到閉包就不得不說當閉包遇到循環變數這一情況，看如下程式碼：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var item = &#39;item&#39; + i;
    result.push( function() {console.log(item + &#39; &#39; + arr[i])} );
  }
  return result;
}
 
var fnlist = buildArr([1,2,3]);
fnlist[0](); // item2 undefined
fnlist[1](); // item2 undefined
fnlist[2](); // item2 undefined

   

怎麼會這樣呢？我們預想的三個輸出應該是 item0 1，  item1 2，  item2 3。為什麼結果卻是回傳的result陣列裡面儲存了三個 item2 undefined ？

原來當閉包遇到循環變數時都是循環結束之後統一保存變數值，拿我們上面的例子來說，i是循環變量，當循環全部結束的時候i正好是i++之後的3，而arr [3]是沒有值的，所以為undefined，有人會疑惑：為什麼item的值是item2，難道不應該是item3嗎？請注意，在最後一次循環的時候也就是i = 2的時候，item的值為item2，當i++，i = 3循環條件不滿足循環結束，此時的item的值已經定下來了，所以此時的arr[i]為arr[3]，而item為item2。這樣能理解嗎？如果我們把程式碼改成這樣那就說得通了：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    result.push( function() {console.log(&#39;item&#39; + i + &#39; &#39; + arr[i])} );
  }
  return result;
}
 
var fnlist = buildArr([1,2,3]);
fnlist[1](); // item3 undefined

   

那麼問題來了，如何改正呢？且看代碼：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    result.push( (function(n) {
      return function() {
       var item = &#39;item&#39; + n;
       console.log(item + &#39; &#39; + arr[n]);
      }
    })(i));
  }
  return result;
}
 
var fnlist = buildArr([1,2,3]);
fnlist[0](); // item0 1
fnlist[1](); // item1 2
fnlist[2](); // item2 3

   

我們可以用一個自執行函數將i綁定，這樣i的每一個狀態都會被存儲，答案就和我們預期的一樣了。

所以以後在使用閉包的時候遇到循環變數我們要習慣性的想到用自執行函數來綁定它。

以上就是我對閉包的理解，如果有什麼意見或建議希望我們能在評論區多多交流。感謝，共勉。