루프 폐쇄를 위한 JavaScript에 대한 간략한 토론-JS 튜토리얼-php.cn

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

高洛峰

풀어 주다： 2017-01-20 13:29:27

원래의

938명이 탐색했습니다.

한 네티즌이 질문을 했습니다. 다음 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 중국어 웹사이트를 주목하세요!