자바스크립트 클로저 매개변수 전달 및 이벤트 루프 바인딩에 대한 토론
- WBOY원래의
- 2016-05-16 16:52:011073검색
오늘 상식에 따라 이벤트를 루프로 묶는 자바스크립트 질문을 봤는데, 결과가 제가 원하는 대로 나오지 않았습니다.
코드 복사 코드는 다음과 같습니다.
간단히 말하면 함수 변수 범위 문제입니다. 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)
}
또는
코드 복사}
})(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방법 데모로 해결했습니다:
코드 복사
}
}
a(i)
다른 네티즌들이 7방법 데모로 해결했습니다:
코드 복사
코드는 다음과 같습니다.
< ;head> title>클로저 데모
1. 각 단락 객체에 변수 i를 저장합니다(p)
코드 복사
코드는 다음과 같습니다.
function init() { 제품 1
제품 2< /p>
제품 3
제품 5
🎜>< /body>1. 각 단락 객체에 변수 i를 저장합니다(p)
코드 복사
코드는 다음과 같습니다.
var pAry = document.getElementsByTagName("p")
for( var i=0; 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를 지역 변수
코드 복사pAry[i].onclick = Function('alert(' i ')')
}
}
요약이 완료되었습니다. 환영합니다. 참여하다!
코드 복사
코드는 다음과 같습니다.
function init2() {
var pAry = document.getElementsByTagName("p")
for( var i=0; i
alert(arguments.callee.i);
}).i = i
}
}
3; , 클로저 레이어를 추가하면 i가 함수 매개변수의 형태로 내부 함수에 전달됩니다.
코드 복사 코드는 다음과 같습니다. 다음과 같습니다:
function init3() {
var pAry = document.getElementsByTagName("p")
for( var i=0; i
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과 미묘한 차이에 유의하세요) var pAry = document.getElementsByTagName("p");
for( var i=0; i
var temp = i; //호출 시 로컬 변수
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}
코드 복사 코드는 다음과 같습니다.
function init5() {
var pAry = document .getElementsByTagName("p")
for( var i=0; ipAry[ i].onclick = function(arg) {
return function() { //함수 반환
alert(arg)
}
}(i); }
6. 함수를 사용해 실제로 구현 함수 인스턴스가 생성될 때마다 클로저가 생성됩니다
var pAry = document .getElementsByTagName("p")
for( var i=0; i
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과의 차이점 주의
🎜>}
7. 함수를 활용하여 구현, 6과의 차이점 주의
코드 복사
코드는 다음과 같습니다. function init7() { var pAry = document.getElementsByTagName("p")
for( var i=0; i}
}
요약이 완료되었습니다. 환영합니다. 참여하다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.