js通過例項介紹關於閉包的用法

antzone發表於2017-04-03
JS

閉包是一個比較晦澀難以理解的概念，特別是對於沒有任何程式設計經驗的新手來說。

如果完全就是一大通的理論，這也許很不利於一些朋友對於此概念的理解，下面就通過例項程式碼的方式來介紹一下。

下面先來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script type="text/javascript">   
window.onload=function(){
  var a=document.getElementsByTagName("a");
  function b(){
    for(var index=0;index<a.length;index++){
　  a[index].onclick=function(){
　    alert(index);
　  }　　
   }
  }
  b();
}
</script>
<body>
<a href="#">螞蟻部落一</a>
<a href="#">螞蟻部落二</a>
<a href="#">螞蟻部落三</a>
</body>
</html>

上面的程式碼本來意圖是，點選連結的時候，能夠彈出對應的連結的索引值。

但是令人失望的是，每一次都是彈出3，下面介紹一下原因:

上述函式未能達到目的的原因是，事件處理函式繫結了變數index，而該事件處理函式又賦值給onclick，也就是說只有在點選a標籤的時候才會呼叫該函式，因此從邏輯上來說，在單純的for迴圈裡面function(){alert(index);}這段函式實際上是沒有執行的，而當我們點選a標籤的時候for迴圈早就已經執行完畢，此時index的值就是for迴圈執行完畢的終態值。通俗一點理解，就是這個index的值是屬於b函式的，而我們需要的i的值是實時傳遞進事件處理函式中的值，使用閉包就可以解決上述問題，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script type="text/javascript">   
window.onload=function(){
  var a=document.getElementsByTagName("a");
  function b(){
    for(var index=0;index<a.length;index++){
　   a[index].onclick=function(index){
　     return function(){
　　    alert(index);
　　  }
      }(index);
　  }
   }
   b();
}
</script>
<body>
<a href="#">螞蟻部落一</a>
<a href="#">螞蟻部落二</a>
<a href="#">螞蟻部落三</a>
</body>
</html>

關於閉包的更多內容可以參閱javascript閉包概念簡單解析一章節。 

相關文章