Maison > Article > interface Web > 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:27938parcourir

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

Article précédent：Explication détaillée de la façon d'écrire et de fonctionner des fermetures en JavaScriptArticle suivant：Explication détaillée de la façon d'écrire et de fonctionner des fermetures en JavaScript

Articles Liés

Voir plus