javascript 자체 시작 function_javascript 기술 문제에 대한 토론

할 말이 많지 않습니다.

먼저 두 가지 코드를 살펴보겠습니다.

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

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i ) {

alert( i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크 #'입니다);
}, 'false');

다시 살펴보기:

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

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i ) {

(function(index ){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크 #입니다 ' index);
}, ' false');
})(i)


HTML 코드는 다음과 같습니다.

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

a
a
a
a
a
a
< a href = "#">a
a



두 스크립트 코드 전후의 효과를 상상해 보세요.

효과의 차이가 보이신다면 축하드립니다. 적어도 나는 그 뒤에 숨은 미스터리를 이해하기 전에 그것에 대해 오랫동안 생각했습니다.

그렇습니다. 여기 코드의 첫 번째 부분은 어떤 링크를 클릭하든 I am link # 8이 출력됩니다.

두 번째 코드 부분은 여러분이 정말로 원하는 결과이고, 그 다음에는 Why입니다.

아래 코드를 보세요.

코드를 복사하세요 코드는 다음과 같습니다.

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i ) {

alert(i);
elems[ i].addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크 #' i);
// 여기서 콜백 함수는
만 트리거합니다. //동일합니다. 여기의 i 값도 루프 끝에서 변경됩니다.
}, 'false')//이유는
/ /여기에 elems[i]가 참조된 요소가 있지만
//그러나 루프가 끝난 후 콜백 함수의 i가 8로 변경되었습니다
//(elems의 길이가 8인 경우)
}

코드 복사

코드는 다음과 같습니다. var elems = document. getElementsByTagName('a');

for (var i = 0; i < elems.length; i ) {

(function(index){
elems[i]. addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크 #입니다' index);
}, 'false'})( i);
//다르다
//루프가 끝난 후 i의 값은 8이 되지만
//클로저에 캡슐화된 인덱스는 실제로 잠겨 있습니다
//항상 저장됩니다. 기억 속에.
//정확히 말하면 전체 함수가 메모리에 잠겨 있어야 합니다.

}


여기에서는 자바스크립트 클로저에 대한 지식이 필요할 수 있습니다.

위 코드에 대해 오랫동안 고민하고 잊어버리지 않도록 기록해 두었습니다.