閉包算是js里面比較不容易理解的點(diǎn)，尤其是對于沒有編程基礎(chǔ)的人來說。

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

 閉包的概念

一個閉包就是一個函數(shù)和被創(chuàng)建的函數(shù)中的作用域?qū)ο蟮慕M合。（作用域?qū)ο笙旅鏁f）

通俗一點(diǎn)的就是 “ 只要一個函數(shù)中嵌套了一個或多個函數(shù)，那么我們就可以稱它們構(gòu)成了閉包。 ”

類似這樣：

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

var a = A();
a(); // i = 5

閉包的原理

1、外部函數(shù)的局部變量若會被閉包函數(shù)調(diào)用就不會在外部函數(shù)執(zhí)行完畢之后立即被回收。

我們知道，不管什么語言，操作系統(tǒng)都會存在一個垃圾回收機(jī)制，將多余分配的空間回收掉以便減小內(nèi)存。而一個函數(shù)的生命周期的是從調(diào)用它開始的，在函數(shù)調(diào)用完畢的時候函數(shù)內(nèi)部的局部變量等都會被回收機(jī)制回收。

我們拿上述例子來說，當(dāng)我們的外部函數(shù)A調(diào)用完畢時，A中的局部變量i按理說就會被操作系統(tǒng)回收而不存在，但是當(dāng)我們用了閉包結(jié)果就不是那樣了，i并不會被回收。試想，如果i被回收了那么返回的函數(shù)里面豈不是就是打印undefined了？

i為什么沒有被回收？

在javascript執(zhí)行一個函數(shù)的時候都會創(chuàng)建一個作用域?qū)ο?，將函?shù)中的局部變量（函數(shù)的形參也是局部變量）保存進(jìn)去，伴隨著那些傳入函數(shù)的變量一起被初始化。

所以當(dāng)調(diào)用A的時候就創(chuàng)建了一個作用域?qū)ο?，我們姑且稱之為Aa，那么這個Aa應(yīng)該是這樣的： Aa { i: 5; };  在A函數(shù)返回一個函數(shù)之后，A執(zhí)行完畢。Aa對象本應(yīng)該被回收，但是由于返回的函數(shù)使用了Aa的屬性i，所以返回的函數(shù)保存了一個指向Aa的引用，所以Aa不會被回收。

所以理解作用域?qū)ο?，就能理解為什么函?shù)的局部變量在遇到閉包的時候不會在函數(shù)調(diào)用完畢時立即被回收了。

再來個例子：

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!

你能說出的它的作用域?qū)ο骔w是什么嗎？

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

2、每調(diào)用一次外部函數(shù)就產(chǎn)生一個新的閉包，以前的閉包依舊存在且互不影響。

3、同一個閉包會保留上一次的狀態(tài)，當(dāng)它被再次調(diào)用時會在上一次的基礎(chǔ)上進(jìn)行。

每調(diào)用一次外部函數(shù)產(chǎn)生的作用域?qū)ο蠖疾灰粯?，你可以這樣想，上面的例子，你每次傳入的參數(shù)age不一樣，所以就每次生成的對象不一樣。

每調(diào)用一次外部函數(shù)那么就會生成一個新的作用域?qū)ο蟆?/p>

function A() {
 var num = 42;
 return function() { console.log(num++); }
}
var a = A();
a(); // 42
a(); // 43

var b = A(); // 重新調(diào)用A()，形成新閉包
b(); // 42   

這個代碼讓我們發(fā)現(xiàn)了兩個事情，一、當(dāng)我們連續(xù)調(diào)用兩次a();，num會在原基礎(chǔ)上自加。說明同一個閉包會保留上一次的狀態(tài)，當(dāng)它被再次調(diào)用時會在上一次的基礎(chǔ)上進(jìn)行。 二、我們的b();的結(jié)果為42，說明它是一個新的閉包，并且不受其他閉包的影響。

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

4、在外部函數(shù)中存在的多個函數(shù) “ 同生共死 ”

以下三個函數(shù)被同時聲明并且都可以對作用域?qū)ο蟮膶傩裕ň植孔兞浚┻M(jìn)行訪問與操作。

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()

由于函數(shù)不能有多個返回值，所以我用了全局變量。我們再次可以看出在我們第二次調(diào)用A()時產(chǎn)生了一個新的閉包。

當(dāng)閉包遇到循環(huán)變量

當(dāng)我們說到閉包就不得不說當(dāng)閉包遇到循環(huán)變量這一種情況，看如下代碼：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var item = 'item' + i;
    result.push( function() {console.log(item + ' ' + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item2 undefined
fnlist[1](); // item2 undefined
fnlist[2](); // item2 undefined

怎么會這樣呢？我們預(yù)想的三個輸出應(yīng)該是 item0 1，  item1 2，  item2 3。為什么結(jié)果卻是返回的result數(shù)組里面存儲了三個 item2 undefined ？

原來當(dāng)閉包遇到循環(huán)變量時都是循環(huán)結(jié)束之后統(tǒng)一保存變量值，拿我們上面的例子來說，i是循環(huán)變量，當(dāng)循環(huán)全部結(jié)束的時候i正好是i++之后的3，而arr[3]是沒有值的，所以為undefined，有人會疑惑：為什么item的值是item2，難道不應(yīng)該是item3嗎？注意，在最后一次循環(huán)的時候也就是i = 2的時候，item的值為item2，當(dāng)i++，i = 3循環(huán)條件不滿足循環(huán)結(jié)束，此時的item的值已經(jīng)定下來了，所以此時的arr[i]為arr[3]，而item為item2。這樣能理解嗎？如果我們將代碼改成這樣那就說得通了：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) { 
    result.push( function() {console.log('item' + i + ' ' + 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 = 'item' + n;
       console.log(item + ' ' + arr[n]);
      }
    })(i));
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item0 1
fnlist[1](); // item1 2
fnlist[2](); // item2 3

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

所以以后在使用閉包的時候遇到循環(huán)變量我們要習(xí)慣性的想到用自執(zhí)行函數(shù)來綁定它。

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

最新評論