한 네티즌이 질문을 했습니다. 다음 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('alert('+i+')') } }
위는 편집자가 가져온 JavaScript에 대한 간략한 설명입니다. for 루프 클로저의 전체 내용은 여기에서 PHP 중국어 사이트에 더 많은 관심을 가져주시길 바랍니다~
For JavaScript의 for 루프 폐쇄와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!