淺談JavaScript for循環(huán) 閉包

更新時(shí)間：2016年06月22日 08:53:35 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談JavaScript for循環(huán) 閉包。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

有個(gè)網(wǎng)友問了個(gè)問題，如下的html，為什么每次輸出都是5，而不是點(diǎn)擊每個(gè)p，就alert出對(duì)應(yīng)的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>產(chǎn)品一</p>   
<p>產(chǎn)品二</p>   
<p>產(chǎn)品三</p>   
<p>產(chǎn)品四</p>   
<p>產(chǎn)品五</p>   
</body>   
</html>

解決方式有以下幾種

1、將變量 i 保存給在每個(gè)段落對(duì)象（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 保存在匿名函數(shù)自身

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以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)

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

4、加一層閉包，i以局部變量形式傳遞給內(nèi)存函數(shù)

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

5、加一層閉包，返回一個(gè)函數(shù)作為響應(yīng)事件（注意與3的細(xì)微區(qū)別）

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

6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會(huì)產(chǎn)生一個(gè)閉包

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

7、用Function實(shí)現(xiàn)，注意與6的區(qū)別

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

以上就是小編為大家?guī)淼臏\談JavaScript for循環(huán) 閉包全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: