자바스크립트 클로저 매개변수 전달 및 이벤트 루프 바인딩에 대한 토론

오늘 상식에 따라 이벤트를 루프로 묶는 자바스크립트 질문을 봤는데, 결과가 제가 원하는 대로 나오지 않았습니다.

코드 복사 코드는 다음과 같습니다.

<script> <br>var = document.getElementsByTagName('a '); <br>for ( var i = as.length; i--; ) { <br>as[i].onclick = function() { <br>alert(i) <br> return false; 🎜>} <br>} <br></script>


1. 이 코드의 링크를 클릭하면 팝업이 모두 -1입니다.

간단히 말하면 함수 변수 범위 문제입니다. function() {alert(i); return false }가 함수 a()로 간주되면; a()인데 내부적으로 사용하고 있어서 외부에서 검색해 보니 for 루프에 정의된 i가 실행이 완료된 후부터 click 이벤트가 실행되기 시작했습니다. 1; 그래서 나올 때마다 -1입니다. 2개의 매개변수가 있는 for 루프도 흔하지 않습니다. 혼란시키다?

　for (문장 1, 문 2, 문 3) {

　 //todo

　}

a.for 루프 조건

일반적으로 말하면 진술 1, 진술 2, 진술 3은 모두 선택 사항입니다.

b. 문 2:

일반적으로 문 2는 초기 변수의 조건을 평가하는 데 사용됩니다.

문 2도 선택 사항입니다.

문 2가 true를 반환하면 루프가 다시 시작되고, false를 반환하면 루프가 종료됩니다.

팁: 문 2를 생략하는 경우 루프 내부에 중단을 제공해야 합니다. 그렇지 않으면 사이클을 멈출 수 없습니다. 이로 인해 브라우저가 중단될 수 있습니다.

c. i-판단 관련:

i-참/거짓을 판단할 때 먼저 i--를 판단한 다음 i--를 계산합니다. i--의 마지막 판단에 들어갈 때, 실제로 i==0이 판단되었을 때, 판단 이후 다시 i--가 실행되어 for 루프가 종료되어 i의 값이 -1이 되었습니다. var i = 1

　!!i--;//ture

해결책:




코드 복사

코드는 다음과 같습니다. var as = document.getElementsByTagName('a') for ( var i = as.length; i--; ) { (function (i){ as[i].onclick = function() {

alert(i);

return false;
}
})(i)
}


또는

코드 복사

코드는 다음과 같습니다. var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { var a = function(i){ as[ i].onclick = function( ) {

alert(i);

return false
}
}
a(i)


다른 네티즌들이 7방법 데모로 해결했습니다:




코드 복사

코드는 다음과 같습니다.

< ;head> title>클로저 데모

제품 1

제품 2< /p>

제품 3

제품 5

🎜>< /body>



1. 각 단락 객체에 변수 i를 저장합니다(p)



코드 복사


코드는 다음과 같습니다.

function init() {
var pAry = document.getElementsByTagName("p")
for( var i=0; ipAry[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 [i].onclick = function() {
alert(arguments.callee.i);
}).i = i
}
}

3; , 클로저 레이어를 추가하면 i가 함수 매개변수의 형태로 내부 함수에 전달됩니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

function init3() {
var pAry = document.getElementsByTagName("p")
for( var i=0; i(function( arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//일 때 매개변수
}
}

호출 4. 클로저 레이어를 추가하고 i를 지역 변수

코드 복사 코드는 다음과 같습니다.

function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i(function () {
var temp = i; //호출 시 로컬 변수
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}

5. 함수를 응답 이벤트로 반환합니다(3과 미묘한 차이에 유의하세요)

코드 복사 코드는 다음과 같습니다.

function init5() {
var pAry = document .getElementsByTagName("p")
for( var i=0; ipAry[ i].onclick = function(arg) {
return function() { //함수 반환
alert(arg)
}
}(i); }


6. 함수를 사용해 실제로 구현 함수 인스턴스가 생성될 때마다 클로저가 생성됩니다

코드 복사 코드는 다음과 같습니다. function init6() {

var pAry = document.getElementsByTagName("p")

for( var i= 0; ipAry[i].onclick = new Function ("alert(" i ");");//new는 한 번에 함수 인스턴스를 생성합니다
🎜>}


7. 함수를 활용하여 구현, 6과의 차이점 주의

코드 복사

코드는 다음과 같습니다. function init7() { var pAry = document.getElementsByTagName("p")

for( var i=0; ipAry[i].onclick = Function('alert(' i ')')
}
}


요약이 완료되었습니다. 환영합니다. 참여하다!