Eine kurze Diskussion über JavaScript zum Schließen von Schleifen-js-Tutorial-php.cn

Eine kurze Diskussion über JavaScript zum Schließen von Schleifen

高洛峰

Freigeben： 2017-01-20 13:29:27

Original

939 Leute haben es durchsucht

Ein Internetnutzer hat eine Frage gestellt: Warum gibt der folgende HTML-Code jedes Mal 5 aus? Anstatt auf jedes p zu klicken, werden die entsprechenden 1, 2, 3, 4, 5 benachrichtigt.

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

Nach dem Login kopieren

Es gibt mehrere Lösungen:

1. Speichern Sie die Variable i auf jedem Absatzobjekt (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);  
   }  
 }  
}

Nach dem Login kopieren

2. Speichern Sie die Variable i in der anonymen Funktion selbst

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

Nach dem Login kopieren

3. Fügen Sie eine Abschlussschicht hinzu und übergeben Sie i in Form einer Funktion Parameter Funktion

function init3() {  
 var pAry = document.getElementsByTagName("p");  
 for( var i=0; i<pAry.length; i++ ) {  
  (function(arg){    
    pAry[i].onclick = function() {    
     alert(arg);  
    };  
  })(i);//调用时参数  
 }  
}

Nach dem Login kopieren

4. Fügen Sie eine Abschlussebene hinzu und übergeben Sie i in Form einer lokalen Variablen an die Speicherfunktion

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);   
   }  
  })();  
 }  
}

Nach dem Login kopieren

5. Fügen Sie eine Abschlussebene hinzu und geben Sie eine Funktion als Antwortereignis zurück (beachten Sie den subtilen Unterschied zu 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);  
 }  
}

Nach dem Login kopieren

6. Verwenden Sie die Funktion zum Implementieren. Tatsächlich wird jedes Mal, wenn eine Funktionsinstanz generiert wird, ein Abschluss generiert

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

Nach dem Login kopieren

7. Verwenden Sie die Funktion zum Implementieren Unterschied zu 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;) 
  }  
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt der kurzen Diskussion über JavaScript für den Schleifenschluss, die Ihnen der Herausgeber präsentiert hat. Ich hoffe, Sie besuchen die chinesische PHP-Website

Weitere Artikel zur kurzen Diskussion von JavaScript für den Schleifenschluss finden Sie auf der chinesischen Website von Follow PHP!