DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談JavaScript for循環 閉包
淺談JavaScript for循環 閉包
編輯:關於JavaScript     

有個網友問了個問題,如下的html,為什麼每次輸出都是5,而不是點擊每個p,就alert出對應的1,2,3,4,5。

<html >   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>閉包演示</title>   
<script type="text/javascript">   
  
function init() {   
  var pAry = document.getElementsByTagName("p");   
  for( var i=0; i<pAry.length; i++ ) {   
     pAry[i].onclick = function() {   
     alert(i);   
  }   
 }   
}   
</script>   
</head>   
<body onload="init();">   
<p>產品一</p>   
<p>產品二</p>   
<p>產品三</p>   
<p>產品四</p>   
<p>產品五</p>   
</body>   
</html>  

解決方式有以下幾種

1、將變量 i 保存給在每個段落對象(p)上

function init() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {   
   pAry[i].i = i;   
   pAry[i].onclick = function() {   
    alert(this.i);   
   }   
 }   
}   

2、將變量 i 保存在匿名函數自身

function init2() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {    
  (pAry[i].onclick = function() {   
    alert(arguments.callee.i);   
  }).i = i;   
 }   
} 

3、加一層閉包,i以函數參數形式傳遞給內層函數

function init3() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {   
  (function(arg){     
    pAry[i].onclick = function() {     
     alert(arg);   
    };   
  })(i);//調用時參數   
 }   
}   

4、加一層閉包,i以局部變量形式傳遞給內存函數

function init4() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {    
  (function () {   
   var temp = i;//調用時局部變量   
   pAry[i].onclick = function() {    
    alert(temp);    
   }   
  })();   
 }   
}   

5、加一層閉包,返回一個函數作為響應事件(注意與3的細微區別)

function init5() {   
 var pAry = document.getElementsByTagName("p");   
 for( var i=0; i<pAry.length; i++ ) {    
  pAry[i].onclick = function(arg) {   
    return function() {//返回一個函數   
    alert(arg);   
   }   
  }(i);   
 }   
}  

6、用Function實現,實際上每產生一個函數實例就會產生一個閉包

function init6() {   
  var pAry = document.getElementsByTagName("p");   
  for( var i=0; i<pAry.length; i++ ) {    
   pAry[i].onclick = new Function("alert(" + i + ");");//new一次就產生一個函數實例  
  }   
}  

7、用Function實現,注意與6的區別

function init7() {   
  var pAry = document.getElementsByTagName("p");   
  for( var i=0; i<pAry.length; i++ ) {   
     pAry[i].onclick = Function('alert('+i+')')  
  }   
}  

以上就是小編為大家帶來的淺談JavaScript for循環 閉包全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved