JavaScript 閉包究竟是什么?

用JavaScript一年多了，閉包總是讓人二丈和尚摸不著頭腦。陸陸續(xù)續(xù)接觸了一些閉包的知識，也犯過幾次因?yàn)椴焕斫忾]包導(dǎo)致的錯(cuò)誤，一年多了資料也看了一些，但還是不是非常明白，最近偶然看了一下 jQuery基礎(chǔ)教程 的附錄，發(fā)現(xiàn)附錄A對JavaScript的閉包的介紹簡單易懂，于是借花獻(xiàn)佛總結(jié)一下。

1、定義

閉包：是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另外一個(gè)函數(shù)。

直接上例子

function a(){
 var i=0;
 function b(){
  alert(++i);
 }
 return b;
}
var c = a();
c();

這段代碼有兩個(gè)特點(diǎn)：

1）、函數(shù)b嵌套在函數(shù)a內(nèi)部；
2）、函數(shù)a返回函數(shù)b。

這樣在執(zhí)行完var c=a()后，變量c實(shí)際上是指向了函數(shù)b，再執(zhí)行c()后就會彈出一個(gè)窗口顯示i的值(第一次為1)。這段代碼其實(shí)就創(chuàng)建了一個(gè)閉包，為什么？因?yàn)楹瘮?shù)a外的變量c引用了函數(shù)a內(nèi)的函數(shù)b，就是說：
當(dāng)函數(shù)a的內(nèi)部函數(shù)b被函數(shù)a外的一個(gè)變量引用的時(shí)候，就創(chuàng)建了一個(gè)閉包。

我猜想你一定還是不理解閉包，因?yàn)槟悴恢篱]包有什么作用，下面讓我們繼續(xù)探索。

2、閉包有什么作用？

簡而言之，閉包的作用就是在a執(zhí)行完并返回后，閉包使得Javascript的垃圾回收機(jī)制GC不會收回a所占用的資源，因?yàn)閍的內(nèi)部函數(shù)b的執(zhí)行需要依賴a中的變量。這是對閉包作用的非常直白的描述，不專業(yè)也不嚴(yán)謹(jǐn)，但大概意思就是這樣，理解閉包需要循序漸進(jìn)的過程。
在上面的例子中，由于閉包的存在使得函數(shù)a返回后，a中的i始終存在，這樣每次執(zhí)行c()，i都是自加1后alert出i的值。

那么我們來想象另一種情況，如果a返回的不是函數(shù)b，情況就完全不同了。因?yàn)閍執(zhí)行完后，b沒有被返回給a的外界，只是被a所引用，而此時(shí)a也只會被b引用，因此函數(shù)a和b互相引用但又不被外界打擾(被外界引用)，函數(shù)a和b就會被GC回收。(關(guān)于Javascript的垃圾回收機(jī)制將在后面詳細(xì)介紹)

3、閉包內(nèi)的微觀世界

如果要更加深入的了解閉包以及函數(shù)a和嵌套函數(shù)b的關(guān)系，我們需要引入另外幾個(gè)概念：函數(shù)的執(zhí)行環(huán)境(excution context)、活動對象(call object)、作用域(scope)、作用域鏈(scope chain)。以函數(shù)a從定義到執(zhí)行的過程為例闡述這幾個(gè)概念。

1）、當(dāng)定義函數(shù)a的時(shí)候，js解釋器會將函數(shù)a的作用域鏈(scope chain)設(shè)置為定義a時(shí)a所在的“環(huán)境”，如果a是一個(gè)全局函數(shù)，則scope chain中只有window對象。
2）、當(dāng)函數(shù)a執(zhí)行的時(shí)候，a會進(jìn)入相應(yīng)的執(zhí)行環(huán)境(excution context)。
3）、在創(chuàng)建執(zhí)行環(huán)境的過程中，首先會為a添加一個(gè)scope屬性，即a的作用域，其值就為第1步中的scope chain。即a.scope=a的作用域鏈。
4）、然后執(zhí)行環(huán)境會創(chuàng)建一個(gè)活動對象(call object)?；顒訉ο笠彩且粋€(gè)擁有屬性的對象，但它不具有原型而且不能通過JavaScript代碼直接訪問。創(chuàng)建完活動對象后，把活動對象添加到a的作用域鏈的最頂端。此時(shí)a的作用域鏈包含了兩個(gè)對象：a的活動對象和window對象。
5）、下一步是在活動對象上添加一個(gè)arguments屬性，它保存著調(diào)用函數(shù)a時(shí)所傳遞的參數(shù)。
6）、最后把所有函數(shù)a的形參和內(nèi)部的函數(shù)b的引用也添加到a的活動對象上。在這一步中，完成了函數(shù)b的的定義，因此如同第3步，函數(shù)b的作用域鏈被設(shè)置為b所被定義的環(huán)境，即a的作用域。

到此，整個(gè)函數(shù)a從定義到執(zhí)行的步驟就完成了。此時(shí)a返回函數(shù)b的引用給c，又函數(shù)b的作用域鏈包含了對函數(shù)a的活動對象的引用，也就是說b可以訪問到a中定義的所有變量和函數(shù)。函數(shù)b被c引用，函數(shù)b又依賴函數(shù)a，因此函數(shù)a在返回后不會被GC回收。

當(dāng)函數(shù)b執(zhí)行的時(shí)候亦會像以上步驟一樣。因此，執(zhí)行時(shí)b的作用域鏈包含了3個(gè)對象：b的活動對象、a的活動對象和window對象，當(dāng)在函數(shù)b中訪問一個(gè)變量的時(shí)候，搜索順序是先搜索自身的活動對象，如果存在則返回，如果不存在將繼續(xù)搜索函數(shù)a的活動對象，依次查找，直到找到為止。如果整個(gè)作用域鏈上都無法找到，則返回undefined。如果函數(shù)b存在prototype原型對象，則在查找完自身的活動對象后先查找自身的原型對象，再繼續(xù)查找。這就是Javascript中的變量查找機(jī)制。

4、閉包的應(yīng)用場景

1）、保護(hù)函數(shù)內(nèi)的變量安全。以最開始的例子為例，函數(shù)a中i只有函數(shù)b才能訪問，而無法通過其他途徑訪問到，因此保護(hù)了i的安全性。
2）、在內(nèi)存中維持一個(gè)變量。依然如前例，由于閉包，函數(shù)a中i的一直存在于內(nèi)存中，因此每次執(zhí)行c()，都會給i自加1。
以上兩點(diǎn)是閉包最基本的應(yīng)用場景，很多經(jīng)典案例都源于此。

5、Javascript的垃圾回收機(jī)制

在Javascript中，如果一個(gè)對象不再被引用，那么這個(gè)對象就會被GC回收。如果兩個(gè)對象互相引用，而不再被第3者所引用，那么這兩個(gè)互相引用的對象也會被回收。因?yàn)楹瘮?shù)a被b引用，b又被a外的c引用，這就是為什么函數(shù)a執(zhí)行后不會被回收的原因。

在javascript中沒有塊級作用域，一般為了給某個(gè)函數(shù)申明一些只有該函數(shù)才能使用的局部變量時(shí)，我們就會用到閉包，這樣我們可以很大程度上減少全局作用域中的變量，凈化全局作用域。

使用閉包有如上的好處，當(dāng)然這樣的好處是需要付出代價(jià)的，代價(jià)就是內(nèi)存的占用。

如何理解上面的那句話呢？

每個(gè)函數(shù)的執(zhí)行，都會創(chuàng)建一個(gè)與該函數(shù)相關(guān)的函數(shù)執(zhí)行環(huán)境，或者說是函數(shù)執(zhí)行上下文。這個(gè)執(zhí)行上下文中有一個(gè)屬性 scope chain（作用域鏈指針），這個(gè)指針指向一個(gè)作用域鏈結(jié)構(gòu)，作用域鏈中的指針又都指向各個(gè)作用域?qū)?yīng)的活動對象。正常情況，一個(gè)函數(shù)在調(diào)用開始執(zhí)行時(shí)創(chuàng)建這個(gè)函數(shù)執(zhí)行上下文及相應(yīng)的作用域鏈，在函數(shù)執(zhí)行結(jié)束后釋放函數(shù)執(zhí)行上下文及相應(yīng)作用域鏈所占的空間。

//聲明函數(shù)
function test(){
 var str = "hello world";
 console.log(str);
}
//調(diào)用函數(shù)
test();

在調(diào)用函數(shù)的時(shí)候會在內(nèi)存中生成如下圖的結(jié)構(gòu)：

但是閉包的情況就有點(diǎn)特殊了，由于閉包函數(shù)可以訪問外層函數(shù)中的變量，所以外層函數(shù)在執(zhí)行結(jié)束后，其作用域活動對象并不會被釋放（注意，外層函數(shù)執(zhí)行結(jié)束后執(zhí)行環(huán)境和對應(yīng)的作用域鏈就會被銷毀），而是被閉包函數(shù)的作用域鏈所引用，直到閉包函數(shù)被銷毀后，外層函數(shù)的作用域活動對象才會被銷毀。這也正是閉包要占用內(nèi)存的原因。

所以使用閉包有好處，也有壞處，濫用閉包會造成內(nèi)存的大量消耗。

使用閉包還有其他的副作用，可以說是bug，也可以說不是，相對不同的業(yè)務(wù)可能就會有不同的看法。

這個(gè)副作用是閉包函數(shù)只能取到外層函數(shù)變量的最終值。

測試代碼如下:(這里使用了jquery對象)

 /*閉包缺陷*/
 (function($){
  var result = new Array(),
  i = 0;
  for(;i<10;i++){
   result[i] = function(){
    return i;
   };
  }
  $.RES1 = result;
 })(jQuery);
 // 執(zhí)行數(shù)組中的函數(shù)
 $.RES1[0]();

上面的代碼先通過匿名函數(shù)表達(dá)式開辟了一塊私有作用域，這個(gè)匿名函數(shù)就是我們上面所說的外層函數(shù)，該外層函數(shù)有一個(gè)參數(shù)$,同時(shí)還定義了變量result和 I , 通過for循環(huán)給數(shù)組result賦值一個(gè)匿名函數(shù)，這個(gè)匿名函數(shù)就是閉包，他訪問了外層函數(shù)的變量I , 理論上數(shù)組resulti 會返回相應(yīng)的數(shù)組下標(biāo)值，實(shí)際情況卻不如所愿。

如上代碼 $.RES10 的執(zhí)行結(jié)果是10.

為什么會這樣呢，因?yàn)閕的最終值就是10.

下面我們通過下圖來詳細(xì)說明下，上面的那段代碼執(zhí)行時(shí)在內(nèi)存中到底發(fā)生了什么：

那么這個(gè)副作用有沒有辦法可以修復(fù)呢？當(dāng)然可以！

我們可以通過下面的代碼來達(dá)到我們的預(yù)期。

 /*修復(fù)閉包缺陷*/
 (function($){
  var result = new Array(),
  i = 0;
  for(;i<10;i++){
   result[i] = function(num){
    return function(){
     return num;
    }
   }(i);
  }
  $.RES2 = result;
 })(jQuery);
 //調(diào)用閉包函數(shù)
 console.log($.RES2[0]());

上面的代碼又在內(nèi)存中發(fā)生了什么？我們同樣用下面的一幅圖來詳細(xì)解釋?？炊松厦娴膱D，我們也就不難理解下面的圖。

6.簡單的例子

首先從一個(gè)經(jīng)典錯(cuò)誤談起，頁面上有若干個(gè)div， 我們想給它們綁定一個(gè)onclick方法，于是有了下面的代碼

<div id="divTest">
 <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
<div id="divTest2">
 <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>


$(document).ready(function() {
  var spans = $("#divTest span");
  for (var i = 0; i < spans.length; i++) {
   spans[i].onclick = function() {
    alert(i);
   }
  }
});

很簡單的功能可是卻偏偏出錯(cuò)了，每次alert出的值都是4，簡單的修改就好使了

var spans2 = $("#divTest2 span");
$(document).ready(function() {
 for (var i = 0; i < spans2.length; i++) {
  (function(num) {
   spans2[i].onclick = function() {
    alert(num);
   }
  })(i);
 }
});

7.內(nèi)部函數(shù)

讓我們從一些基礎(chǔ)的知識談起,首先了解一下內(nèi)部函數(shù)。內(nèi)部函數(shù)就是定義在另一個(gè)函數(shù)中的函數(shù)。例如：

function outerFn () {
 functioninnerFn () {}
}

innerFn就是一個(gè)被包在outerFn作用域中的內(nèi)部函數(shù)。這意味著，在outerFn內(nèi)部調(diào)用innerFn是有效的，而在outerFn外部調(diào)用innerFn則是無效的。下面代碼會導(dǎo)致一個(gè)JavaScript錯(cuò)誤：

function outerFn() {
 document.write("Outer function<br/>");
 function innerFn() {
  document.write("Inner function<br/>");
 }
}
innerFn();//Uncaught ReferenceError: innerFn is not defined

不過在outerFn內(nèi)部調(diào)用innerFn，則可以成功運(yùn)行：

function outerFn() {
   document.write("Outer function<br/>");
   function innerFn() {
    document.write("Inner function<br/>");
   }
   innerFn();
  }
  outerFn();

8、偉大的逃脫（內(nèi)部函數(shù)如何逃脫外部函數(shù)）

JavaScript允許開發(fā)人員像傳遞任何類型的數(shù)據(jù)一樣傳遞函數(shù)，也就是說，JavaScript中的內(nèi)部函數(shù)能夠逃脫定義他們的外部函數(shù)。

逃脫的方式有很多種，例如可以將內(nèi)部函數(shù)指定給一個(gè)全局變量：

//定義全局變量逃脫
var globalVar;
function outerFn() {
 document.write("Outer function<br/>");   
 function innerFn() {
  document.write("Inner function<br/>");
 }
 globalVar = innerFn;
}
outerFn(); //Outer function Inner function
globalVar(); //Outer function Inner function
innerFn(); //ReferenceError: innerFn is not defined

調(diào)用outerFn時(shí)會修改全局變量globalVar，這時(shí)候它的引用變?yōu)閕nnerFn，此后調(diào)用globalVar和調(diào)用innerFn一樣。這時(shí)在outerFn外部直接調(diào)用innerFn仍然會導(dǎo)致錯(cuò)誤，這是因?yàn)閮?nèi)部函數(shù)雖然通過把引用保存在全局變量中實(shí)現(xiàn)了逃脫，但這個(gè)函數(shù)的名字依然只存在于outerFn的作用域中。

也可以通過在父函數(shù)的返回值來獲得內(nèi)部函數(shù)引用

function outerFn() {
 document.write("Outer function<br/>");
 function innerFn() {
  document.write("Inner function<br/>");
 }
 return innerFn;
}
var fnRef = outerFn();
fnRef();

這里并沒有在outerFn內(nèi)部修改全局變量，而是從outerFn中返回了一個(gè)對innerFn的引用。通過調(diào)用outerFn能夠獲得這個(gè)引用，而且這個(gè)引用可以可以保存在變量中。

這種即使離開函數(shù)作用域的情況下仍然能夠通過引用調(diào)用內(nèi)部函數(shù)的事實(shí)，意味著只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運(yùn)行時(shí)需要跟蹤引用這個(gè)內(nèi)部函數(shù)的所有變量，直到最后一個(gè)變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間（紅色部分是理解閉包的關(guān)鍵）。

說了半天總算和閉包有關(guān)系了，閉包是指有權(quán)限訪問另一個(gè)函數(shù)作用域的變量的函數(shù)，創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，就是我們上面說的內(nèi)部函數(shù)，所以剛才說的不是廢話，也是閉包相關(guān)的 ^_^

9、變量的作用域

內(nèi)部函數(shù)也可以有自己的變量，這些變量都被限制在內(nèi)部函數(shù)的作用域中：

function outerFn() {
 document.write("Outer function<br/>");
 function innerFn() {
  var innerVar = 0;
   innerVar++;
   document.write("Inner function\t");
   document.write("innerVar = "+innerVar+"<br/>");
  }
  return innerFn;
}
  var fnRef = outerFn();
  fnRef();
  fnRef();
  var fnRef2 = outerFn();
  fnRef2();
  fnRef2();

每當(dāng)通過引用或其它方式調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)，就會創(chuàng)建一個(gè)新的innerVar變量，然后加1，最后顯示

Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1

內(nèi)部函數(shù)也可以像其他函數(shù)一樣引用全局變量：

var globalVar = 0;
function outerFn() {
 document.write("Outer function<br/>");
 function innerFn() {
  globalVar++;
  document.write("Inner function\t");
  document.write("globalVar = " + globalVar + "<br/>");
 }
 return innerFn;
}
 var fnRef = outerFn();
 fnRef();
 fnRef();
 var fnRef2 = outerFn();
 fnRef2();
 fnRef2();

現(xiàn)在每次調(diào)用內(nèi)部函數(shù)都會持續(xù)地遞增這個(gè)全局變量的值：

Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4

但是如果這個(gè)變量是父函數(shù)的局部變量又會怎樣呢？因?yàn)閮?nèi)部函數(shù)會引用到父函數(shù)的作用域（有興趣可以了解一下作用域鏈和活動對象的知識），內(nèi)部函數(shù)也可以引用到這些變量

function outerFn() {
 var outerVar = 0;
 document.write("Outer function<br/>");
 function innerFn() {
  outerVar++;
  document.write("Inner function\t");
  document.write("outerVar = " + outerVar + "<br/>");
 }
 return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();

這一次結(jié)果非常有意思，也許或出乎我們的意料

Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2

我們看到的是前面兩種情況合成的效果，通過每個(gè)引用調(diào)用innerFn都會獨(dú)立的遞增outerVar。也就是說第二次調(diào)用outerFn沒有繼續(xù)沿用outerVar的值，而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個(gè)一個(gè)新的outerVar實(shí)例，兩個(gè)計(jì)數(shù)器完全無關(guān)。

當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí)，就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。這種情況下我們稱既不是內(nèi)部函數(shù)局部變量，也不是其參數(shù)的變量為自由變量，稱外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上講，如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量，相當(dāng)于授權(quán)該變量能夠被延遲使用。因此，當(dāng)外部函數(shù)調(diào)用完成后，這些變量的內(nèi)存不會被釋放（最后的值會保存），閉包仍然需要使用它們。

10.閉包之間的交互

當(dāng)存在多個(gè)內(nèi)部函數(shù)時(shí)，很可能出現(xiàn)意料之外的閉包。我們定義一個(gè)遞增函數(shù)，這個(gè)函數(shù)的增量為2

function outerFn() {
  var outerVar = 0;
  document.write("Outer function<br/>");
  function innerFn1() {
   outerVar++;
   document.write("Inner function 1\t");
   document.write("outerVar = " + outerVar + "<br/>");
  }

  function innerFn2() {
   outerVar += 2;
   document.write("Inner function 2\t");
   document.write("outerVar = " + outerVar + "<br/>");
  }
  return { "fn1": innerFn1, "fn2": innerFn2 };
}
var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();
var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();

我們映射返回兩個(gè)內(nèi)部函數(shù)的引用，可以通過返回的引用調(diào)用任一個(gè)內(nèi)部函數(shù)，結(jié)果：

Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4

innerFn1和innerFn2引用了同一個(gè)局部變量，因此他們共享一個(gè)封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時(shí)，久違innerFn2設(shè)置了outerVar的新的起點(diǎn)值，反之亦然。我們也看到對outerFn的后續(xù)調(diào)用還會創(chuàng)建這些閉包的新實(shí)例，同時(shí)也會創(chuàng)建新的封閉環(huán)境，本質(zhì)上是創(chuàng)建了一個(gè)新對象，自由變量就是這個(gè)對象的實(shí)例變量，而閉包就是這個(gè)對象的實(shí)例方法，而且這些變量也是私有的，因?yàn)椴荒茉诜庋b它們的作用域外部直接引用這些變量，從而確保了了面向?qū)ο髷?shù)據(jù)的專有性。

11.解惑
現(xiàn)在我們可以回頭看看開頭寫的例子就很容易明白為什么第一種寫法每次都會alert 4了。

for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
  alert(i);
 }
}

上面代碼在頁面加載后就會執(zhí)行，當(dāng)i的值為4的時(shí)候，判斷條件不成立，for循環(huán)執(zhí)行完畢，但是因?yàn)槊總€(gè)span的onclick方法這時(shí)候?yàn)閮?nèi)部函數(shù)，所以i被閉包引用(閉包引用傳的是引用)，內(nèi)存不能被銷毀，i的值會一直保持4，直到程序改變它或者所有的onclick函數(shù)銷毀（主動把函數(shù)賦為null或者頁面卸載）時(shí)才會被回收。這樣每次我們點(diǎn)擊span的時(shí)候，onclick函數(shù)會查找i的值（作用域鏈?zhǔn)且梅绞剑徊榈扔?，然后就alert給我們了。

而第二種方式是使用了一個(gè)立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包，函數(shù)聲明放在括號內(nèi)就變成了表達(dá)式，后面再加上括號括號就是調(diào)用了，這時(shí)候把i當(dāng)參數(shù)傳入，函數(shù)立即執(zhí)行，num保存每次i的值。

這一通下來想必大家也和我一樣，對閉包有所了解了吧，當(dāng)然完全了解的話需要把函數(shù)的執(zhí)行環(huán)境和作用域鏈搞清楚。

最新評論