Maison >interface Web >js tutoriel >Une brève discussion sur JavaScript pour la fermeture de boucle

Une brève discussion sur JavaScript pour la fermeture de boucle

高洛峰
高洛峰original
2017-01-20 13:29:27952parcourir

Un internaute a posé une question, pourquoi la sortie html suivante est-elle toujours 5, au lieu de cliquer sur chaque p, le 1, 2, 3, 4, 5 correspondant sera alerté.

<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>

Il existe plusieurs solutions :

1. Enregistrez la variable i sur chaque objet paragraphe (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. Enregistrez la variable i dans la fonction anonyme elle-même

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. Ajoutez une couche de fermeture et transmettez i à la couche interne sous forme de fonction. paramètres Fonction

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. Ajouter une couche de fermeture, et passer i à la fonction mémoire sous la forme d'une variable locale

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. Ajoutez une couche de fermeture et renvoyez une fonction en tant qu'événement de réponse (notez la différence subtile avec 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. Utilisez la fonction pour implémenter, En fait, chaque fois qu'une instance de fonction est générée, une fermeture sera générée

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

7. Utilisez la fonction pour implémenter. différence par rapport à 6

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

Ce qui précède est l'intégralité du contenu de la brève discussion sur JavaScript pour la fermeture de boucle présentée par l'éditeur. J'espère que vous visiterez le site Web PHP chinois ~.

Pour plus d'articles liés à la brève discussion sur JavaScript pour la fermeture de boucle, veuillez visiter le site Web Follow PHP Chinese !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn