Javascript 클로저 데모 코드 요약_javascript 기술

<meta charset="utf-8"> <title>폐쇄 시연</title> <style type="text/css"> p {background:gold;} </style> <p> </p>제품 0<p> </p>제품 1<p> </p>제품 2<p> </p>제품 3<p> </p>제품 4
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

위의 시나리오는 초보자가 직면하는 일반적인 상황입니다. 즉, HTML 요소 컬렉션을 가져와 루프의 요소에 이벤트를 추가합니다. 이벤트 응답 함수(이벤트 핸들러)에서 해당 인덱스를 얻습니다. 그러나 매번 마지막 루프의 인덱스를 얻습니다.
이유는 초보자들이 자바스크립트의 클로저 기능을 이해하지 못하기 때문입니다. element.onclick=function(){alert(i);}를 통해 요소에 클릭 이벤트를 추가합니다. 응답 함수 function(){alert(i);}의 i는 각 루프(예: 0, 1, 2, 3, 4)에 해당하는 i가 아니라 루프 뒤의 마지막 i의 값 5입니다. 즉, 루프 도중 응답 함수에 해당 값 i가 저장되지 않았으나, 마지막으로 i 값이 5였다.

이유를 이해하고 많은 해결책을 찾았습니다(그저 관심이 있어서). 가장 먼저 떠오르는 두 가지
1. 각 단락 객체에 변수 i를 저장합니다(p)

코드 복사

코드는 다음과 같습니다:

function init1() {
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); //
}
}

호출 시 매개변수, 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. 함수를 사용하여 구현합니다. 차이점에 주의하세요. with 6

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

function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; ipAry[i].onclick = Function('alert(' i ')');
}
}