할 말이 많지 않습니다.
먼저 두 가지 코드를 살펴보겠습니다.
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인 경우)
}
코드 복사
for (var i = 0; i < elems.length; i ) {
(function(index){
elems[i]. addEventListener('click', function (e) {
e.preventDefault();
alert('나는 링크 #입니다' index);
}, 'false'})( i);
//다르다
//루프가 끝난 후 i의 값은 8이 되지만
//클로저에 캡슐화된 인덱스는 실제로 잠겨 있습니다
//항상 저장됩니다. 기억 속에.
//정확히 말하면 전체 함수가 메모리에 잠겨 있어야 합니다.
}
여기에서는 자바스크립트 클로저에 대한 지식이 필요할 수 있습니다.
위 코드에 대해 오랫동안 고민하고 잊어버리지 않도록 기록해 두었습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
