javascript閉包的應用簡單程式碼例項

admin發表於2017-04-15
JavaScript

關於閉包的概念可以參閱閉包概念簡單解析一章節。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
ul li{ 
  font-size:12px; 
  list-style:none;
  cursor:pointer;
  height:30px;
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByTagName("li");
  var odiv=document.getElementById("show");
  for(var index=0;index<lis.length;index++){
    lis[index].onclick=function(){
      odiv.innerHTML=index;
    }
  }
}
</script> 
</head>  
<body> 
<div id="show"></div> 
<ul id="box"> 
  <li>只有努力奮鬥才會有美好的未來。</li> 
  <li>螞蟻部落歡迎您，希望能夠給大家提供需要的知識。</li> 
  <li>分享的精神和互助的胸懷是進步的最大源動力。</li> 
  <li>只有當前的時間才是最真實的，下一秒都是虛幻的。</li> 
  <li>每一天都是新的，要好好的珍惜。</li> 
</ul> 
</body> 
</html>

上面的程式碼我們的本意是點選li元素能夠顯示對應的索引。

出現這種狀況的原因是，當事件處理函式繫結完畢之後，index的值也就變成了5了。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
ul li{ 
  font-size:12px; 
  list-style:none;
  cursor:pointer;
  height:30px;
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByTagName("li");
  var odiv=document.getElementById("show");
  for(var index=0;index<lis.length;index++){
    (function(index){
      lis[index].onclick = function(){
        odiv.innerHTML=index;
      }
    })(index);
  }
}
</script> 
</head>  
<body> 
<div id="show"></div> 
<ul id="box"> 
  <li>只有努力奮鬥才會有美好的未來。</li> 
  <li>螞蟻部落歡迎您，希望能夠給大家提供需要的知識。</li> 
  <li>分享的精神和互助的胸懷是進步的最大源動力。</li> 
  <li>只有當前的時間才是最真實的，下一秒都是虛幻的。</li> 
  <li>每一天都是新的，要好好的珍惜。</li> 
</ul> 
</body> 
</html>

上面的程式碼實現了我們的要求，下面做一下簡單介紹。

此程式碼是將函式當返回值，通過自執行函式的引數，把變數index傳進去（因為是通過函式引數的方式傳遞，所以內部的index與外部的index就已經隔絕），然後因為返回函式要引用這個index變數，所以當for迴圈結束也不會釋放index變數。即在記憶體中儲存了index變數的值。

相關文章