집 >웹 프론트엔드 >JS 튜토리얼 >루프 폐쇄를 위한 JavaScript에 대한 간략한 토론

루프 폐쇄를 위한 JavaScript에 대한 간략한 토론

高洛峰원래의: 2017-01-20 13:29:27953검색

한 네티즌이 질문을 했습니다. 다음 HTML은 왜 매번 5를 출력합니까? 각 p를 클릭하는 대신 해당 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. 클로저 레이어를 추가하고 함수 매개 변수

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

형식으로 내부 함수에 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. 실제로 함수를 사용하여 구현합니다. 함수 인스턴스가 생성될 때마다 클로저가 생성됩니다. Package

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

7. 함수를 사용하여 구현합니다. 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;) 
  }  
}

위는 편집자가 가져온 JavaScript에 대한 간략한 설명입니다. for 루프 클로저의 전체 내용은 여기에서 PHP 중국어 사이트에 더 많은 관심을 가져주시길 바랍니다~

For JavaScript의 for 루프 폐쇄와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：JavaScript에서 클로저를 작성하고 기능하는 방법에 대한 자세한 설명다음 기사：JavaScript에서 클로저를 작성하고 기능하는 방법에 대한 자세한 설명

루프 폐쇄를 위한 JavaScript에 대한 간략한 토론

관련 기사