本文實例講述了JavaScript閉包原理與用法。分享給大家供大家參考，具體如下：

1、與閉包有關(guān)的兩個概念：

1) 變量的作用域

不帶有關(guān)鍵字var的變量會成為全局變量；

在函數(shù)中使用關(guān)鍵字var聲明的變量是局部變量。

局部變量只有在函數(shù)內(nèi)部才能訪問到，在函數(shù)外面是訪問不到的。但在函數(shù)內(nèi)部可以通過作用域鏈一直向上搜索直到全局對象，也就是說，函數(shù)內(nèi)部可以訪問函數(shù)外部的變量。

2) 變量的生存周期

對于全局變量，其生存周期是永久的，除非主動銷毀這個全局變量；

而對于在函數(shù)內(nèi)用關(guān)鍵字var聲明的局部變量，當(dāng)退出函數(shù)時，這些局部變量會隨著函數(shù)調(diào)用結(jié)束而被銷毀。

var func = function() {
  var i = 1;
  alert(i); // 輸出：1
};
alert(i); // 報錯：i is not defind.

例外情況：閉包

var func = function() {
  var i = 1;
  return function() {
    alert(i);
    i++;
  }
};
var f1 = func();
f1(); // 輸出：1
f1(); // 輸出：2
var f2 = func();
f2(); // 輸出：1
f2(); // 輸出：2

2、從閉包的一個經(jīng)典應(yīng)用談起

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
  var divs = document.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    divs[i].onclick = function() {
      alert(i);
    };
  }
</script>

問題：無論單擊哪個div，都會彈出5。

原因：onclick事件是異步觸發(fā)的，當(dāng)事件被觸發(fā)時，for循環(huán)早已結(jié)束，此時變量i的值早已經(jīng)是5。

解決：在閉包的幫助下，把每次循環(huán)的i值都封閉起來。當(dāng)事件函數(shù)順著作用域鏈從內(nèi)到外查找變量i時，會先找到被封閉在閉包環(huán)境的i，單擊div時，會分別輸出0,1,2,3,4。

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = (function(num) {
    return function() {
      alert(num);
    };
  })(i);
}
</script>

類似實例：閉包直接賦給數(shù)組

function createFunctions() {
  var result = new Array();
  for (var i = 0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
for (var i = 0; i < 10; i++)
  alert(createFunctions()[i]());

結(jié)果：result的每個元素都返回10。

說明：閉包的作用域鏈有明顯的副作用——閉包總是獲得外部函數(shù)變量的最終值。上面代碼中，外部函數(shù)產(chǎn)生一個函數(shù)數(shù)組result并返回。函數(shù)數(shù)組中的每個元素都是一個函數(shù)，每個函數(shù)都返回 i變量。似乎每個函數(shù)應(yīng)該返回每次循環(huán)的i值，即依次返回0到9，但事實是，每個函數(shù)的返回結(jié)果都是10。這是因為每個內(nèi)部函數(shù)返回的是變量i，而不是i在某個時刻的特定值，而i的作用域是整個外部函數(shù)，當(dāng)外部函數(shù)執(zhí)行完成后，i的值是10。

解決：在每個內(nèi)部函數(shù)的內(nèi)部，再產(chǎn)生一個匿名函數(shù)并返回。

function createFunctions() {
  var result = new Array();
  for (var i = 0; i < 10; i++) {
    result[i] = (function(num) {
      return function() {
        return num;
      };
    })(i);
  }
  return result;
}
for (var i = 0; i < 10; i++)
  alert(createFunctions()[i]());

結(jié)果：result依次返回0到9。

說明：(i)使得該層匿名函數(shù)立即執(zhí)行。

3、閉包

有時候需要得到函數(shù)內(nèi)的局部變量。如何從外部讀取局部變量？那就是在函數(shù)的內(nèi)部，再定義一個函數(shù)。

閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量，利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。

①　閉包的原理

1) 后臺執(zhí)行環(huán)境中，閉包的作用域鏈包含著自己的作用域、函數(shù)的作用域和全局作用域。

2) 通常，函數(shù)的作用域和變量會在函數(shù)執(zhí)行結(jié)束后銷毀。

3) 但是，當(dāng)函數(shù)返回一個閉包時，這個函數(shù)的作用域?qū)恢痹趦?nèi)存中保存到閉包不存在為止。

②　閉包的特性

1) 函數(shù)內(nèi)再嵌套函數(shù)。

2) 內(nèi)部函數(shù)可以引用外層的參數(shù)和變量。

3) 參數(shù)和變量不會被垃圾回收機制回收。

③　閉包的用途

1) 讀取函數(shù)內(nèi)部的變量。

function f1(){
  var n = 999;
  function f2(){
    alert(n);//999
  }
}

在上面的代碼中，函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時f1內(nèi)部的所有局部變量，對f2都是可見的。但是反過來就不行，f2內(nèi)部的局部變量，對f1就是不可見的。既然f2可以讀取f1中的局部變量，那么只要把f2作為返回值，就可以在f1外部讀取它的內(nèi)部變量了。

function f1(){
  var n = 999;
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result();//999

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個函數(shù)內(nèi)部的函數(shù)"。所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

function f1(){
  var n = 999;
  nAdd = function(){n += 1}
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result();//999
nAdd();
result();//1000

result實際上就是閉包f2函數(shù)。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒有在f1調(diào)用后被自動清除。原因就在于f1是f2的父函數(shù)，而f2被賦給了一個全局變量，這導(dǎo)致f2始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會在調(diào)用結(jié)束后，被垃圾回收機制回收。

2) 讓函數(shù)內(nèi)部的變量的值始終保持在內(nèi)存中（延長局部變量的壽命）。

var print, add, set;
function closure() {
  var number = 8;
  print = function() {
    alert(number);
  }
  add = function() {
    number++;
  }
  set = function(x) {
    number = x;
  }
}
closure();//創(chuàng)建一個閉包
add();
print();//9
set(0);
print();//0
var oldClosure = print;
closure();//創(chuàng)建一個新的閉包
print();//8
oldClosure();//0

使用閉包的注意點：由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。也就是說，閉包會引用外部函數(shù)作用域，會占用更多的內(nèi)存，過度使用閉包，會導(dǎo)致性能問題。所以，僅當(dāng)必要時才使用閉包。對產(chǎn)生閉包的函數(shù)，使用后應(yīng)該解除引用。

3)自執(zhí)行函數(shù)+閉包減少全局變量污染（封裝私有變量）

var person = (function() {
  var_name = "Alice";
  var _id = 16;
  return {
    getUserInfo: function() {
      return _name + ": " + _id;
    }
  }
})();

使用下劃線來約定私有變量_name和_age，它們被封裝在閉包產(chǎn)生的作用域中，外部是訪問不到這兩個變量的，這就避免了對全局的命令污染。

④　閉包的缺點：

1) 需要維護額外的作用域。

2) 過渡使用閉包會占用大量內(nèi)存。

4、this對象

在閉包內(nèi)使用this對象將產(chǎn)生一些復(fù)雜的行為。this對象的值基于函數(shù)所在的執(zhí)行環(huán)境在運行時決定：在全局函數(shù)中使用時，this等于window(非嚴(yán)格模式)或undefined(嚴(yán)格模式)；而當(dāng)作為對象的方法調(diào)用時，this等于這個對象。

var name = "The window";
var object = {
  name: "My object",
  getName: function() {
    return function() {
      return this.name;
    };
  }
};
alert(object.getName()());//輸出："The window"

每個函數(shù)一旦被調(diào)用，它將自動獲得this和arguments兩個變量。一個內(nèi)部函數(shù)是不能直接從外部函數(shù)訪問到這兩個變量的?？梢酝ㄟ^將this對象存儲在另一個變量中來解決這個問題。把外部作用域中的this對象保存在一個閉包能夠訪問到的變量里，就可以讓閉包訪問該對象了。

var name ="The window";
var object = {
  name: "My object",
  getName: function() {
    var that = this;
    return function() {
      return that.name;
    };
  }
};
alert(object.getName()());//輸出："My object"

要讓閉包訪問外部函數(shù)的this和arguments對象，可以通過將它們的引用存儲在另一個變量中來完成。

5、內(nèi)存泄漏

使用閉包的時候很容易造成循環(huán)引用，若閉包的作用域包含著一些DOM節(jié)點，這時候就有可能造成內(nèi)存泄漏，但其實，這本身不是閉包的問題，而是由于：BOM和DOM中的對象是使用C++以COM對象的方式實現(xiàn)的，而COM對象的垃圾收集機制采用的是引用計數(shù)策略，在基于引用計數(shù)策略的垃圾回收機制中，若兩個對象之間形成了循環(huán)引用，則這兩個對象都無法被回收。

function assignHandler() {
  var element = document.getElementById("id");
  element.onclick = function() {
    alert(element.id);
  }
}

匿名函數(shù)保存了一個對element的引用，只要匿名函數(shù)存在，element的引用數(shù)至少為1，它所占用的內(nèi)存就永遠(yuǎn)不會被回收。

function assignHandler() {
  var element = document.getElementById("id");
  var id = element.id;
  element.onclick = function() {
    alert(id);
  }
  element = null;
}

通過把element.id的一個副本保存在變量中，并且在閉包中引用該變量消除了循環(huán)引用，但是僅僅做到這一步還不能解決內(nèi)存泄漏的問題，閉包會引用包含函數(shù)的所有活動對象，包含element，即使閉包不直接引用element，包含函數(shù)的活動對象中也仍然會保存一個引用，因此有必要把element元素設(shè)置為null，這樣就能解除對DOM對象的引用，確保正?；厥掌湔加玫膬?nèi)存。

6、模仿塊級作用域

JavaScript中沒有直接的塊級作用域。

function output(count) {
  for (var i = 0; i < count; i++) {
    alert(i);
  }
  alert(i);//輸出：10
}

使用閉包可以模仿塊級作用域——創(chuàng)建并立即調(diào)用一個函數(shù)，這樣既可以執(zhí)行其中的代碼，又不會在內(nèi)存中留下對該函數(shù)的引用。結(jié)果是內(nèi)部函數(shù)的所有變量都會立即被銷毀，除非將某些變量賦值給了包含作用域（即外部作用域）中的變量。

用作塊級作用域的匿名函數(shù)：將函數(shù)聲明包含在一對圓括號中，表示它實際上是一個函數(shù)表達(dá)式，緊隨其后的另一對圓括號會立即調(diào)用這個函數(shù)。

(function() {
  //這里是塊級作用域；
}) ();

可以使用匿名函數(shù)表達(dá)式來模擬塊級作用域，任何定義在匿名函數(shù)中的變量在匿名函數(shù)執(zhí)行完之后都將被銷毀，在匿名函數(shù)外訪問這些變量將會產(chǎn)生錯誤。

function output(count) {
  (function() {
    for (var i = 0; i < count; i++) {
      alert(i);
    }
  }) ();
  alert(i);//出錯
}

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論