JS FAQ: 클릭하면 나타나는 i가 항상 마지막 one_javascript 팁인 이유는 무엇입니까?

프런트엔드 그룹에서 이런 질문을 하시는 분들이 많았는데, 오늘 밤에도 이런 질문을 하시는 분이 계셔서 정리해보려고 글을 썼습니다. 먼저 코드를 살펴보면 li를 클릭하면 현재 li에 해당하는 index 값이 팝업됩니다. 너무 많은 사람들이 다음 코드를 작성했습니다.

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++){
  aLi[i].onclick = function(){
    alert(i);
  }
}

그러나 결과는 만족스럽지 않습니다. 단순화를 위해 페이지에 2개의 리가 있다는 데 동의합니다. li를 클릭하면 모든 팝업이 2로 표시됩니다.
먼저 결과가 1인 이유를 분석해 보겠습니다. 간단히 루프를 두 부분으로 나눌 수 있습니다.

i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.

클릭 기능을 실행하면 범위 체인이 있습니다. 이 범위 체인은 개체 목록입니다. 이 개체 그룹은 코드 범위의 변수를 정의합니다. (변수객체의 내용을 더 알고 싶다면 변수객체를 보면 된다.) Alert(i)를 할 때 내부에서 외부로 변수 i를 찾아보게 된다. 이때 이 함수의 범위 체인에는 두 개의 개체가 있으며 이때 루프는 종료되었으며 이때 i의 값은 2입니다. 따라서 임의의 li를 클릭하면 팝업이 나타납니다. 2, 우리가 원하는 인덱스 값이 아닙니다. 요점은 팝업되는 것이 변수 i, 변수 i, 변수 i라는 것입니다. 중요한 말을 세 번 말하세요.

그렇다면 이 문제를 어떻게 해결해야 할까요? 우리가 해야 할 일은 이벤트를 aLi[i]에 바인딩할 때마다 내부 범위에 i 값을 저장하는 것입니다. 해결책은 다음과 같습니다.

var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
 (function(i){
   aLi[i].onclick = function () {
      alert(i);
     };
 })(i)
}

여기에는 블록 수준 범위 개념이 포함됩니다. ES6가 나오기 전에는 함수가 블록 수준 범위를 만드는 주요 수단이었습니다. 여기에서는 i를 매개변수로 사용하여 aLi[i].onclick 외부에 함수 레이어를 배치하고 결과를 다시 분석해 보겠습니다.

 i = 0时,
  (function(i){
   aLi[0].onclick = function(){
     alert(i);
   }
  })(0)
  i = 1时,
  (function(i){
   aLi[1].onclick = function(){
     alert(i);
   }
  })(1)
  i = 2时，不满足条件跳出循环.

자체 실행 함수 래핑의 추가 레이어로 인해 li를 클릭하면 내부에서 외부까지 세 가지 수준의 범위가 있습니다. 클릭 함수 내부의 변수 개체, 자체 실행 기능과 레이어의 창 개체. 2단계 검색을 해보니 자체 실행 함수의 i가 전달된 매개변수 값과 일치하고, 그에 맞춰 그때의 i 값이 저장되어 해당 인덱스 값이 떴다.

일반적인 js 문제를 알려드리겠습니다. li를 클릭하면 현재 li 인덱스와 innerHTML 함수가 팝업됩니다.

그 중 하나를 클릭하면 다음 경고가 표시됩니다.

우리의 일반적인 생각에 따르면 코드는 다음과 같이 작성되어야 합니다.

var myul = document.getElementsByTagName("ul")[0];
  var list = myul.getElementsByTagName("li");
 
  function foo(){
    for(var i = 0, len = list.length; i < len; i++){
      list[i].onclick = function(){
        alert(i + "----" + this.innerHTML);
      }
    }
  }
  foo();

그런데 안타깝게도 결과는 이렇습니다.

인덱스가 항상 4인 이유는 js에 블록 수준 범위가 없기 때문입니다. 세 가지 솔루션을 소개합니다

1. 클로저를 사용하세요

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
  for(var i = 0, len = list.length; i < len; i++){
    var that = list[i];
    list[i].onclick = (function(k){
      var info = that.innerHTML;
      return function(){
        alert(k + "----" + info);
      };
    })(i);
  }
}
foo();
</script>

2. ES6의 새로운 기능인 let을 사용하여 변수를 선언하세요.

let으로 선언된 변수는 블록 수준 범위를 가지며 이는 분명히 요구 사항을 충족합니다. 그러나 이를 적용하려면 'use strict'(엄격 모드 사용)를 추가해야 한다는 점에 유의해야 합니다.

<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
  for(let i = 0, len = list.length; i < len; i++){
    list[i].onclick = function(){
      alert(i + "----" + this.innerHTML);
    }
  }
}
foo();
</script>

3. jquery를 도입하고 이벤트 바인딩에 사용하거나 위임합니다(모두 이벤트 프록시의 특성을 가집니다)

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$("ul").delegate("li", "click", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
  var index = $(this).index();
  var info = $(this).html();
  alert(index + "----" + info);
});
</script>