루프의 클로저로 인해 모든 링크가 동일한 값을 표시하는 이유는 무엇입니까?

루프의 JavaScript 클로저: Demystified

클로저 이해

JavaScript의 클로저는 함수가 즉시 외부에서 변수에 액세스할 수 있도록 허용합니다. 범위, 개인 데이터 컨텍스트 생성. 그러나 클로저에서 참조하는 변수는 둘러싸는 함수의 실행이 완료된 후에도 계속 액세스할 수 있습니다.

루프의 클로저 관련 문제

다음 코드 조각을 고려하세요.

<code class="javascript">for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = function (num) {
    return function () {
      alert(num);
    };
  }(i);
  document.body.appendChild(link);
}</code>

이 예에서 내부 함수에 num으로 전달된 i 값은 모든 링크 요소에 걸쳐 "공유 변수"를 생성하는 클로저에 의해 캡처됩니다. 즉, 링크를 클릭하면 항상 i의 마지막 값(이 경우 4)이 표시됩니다.

IIFE(즉시 호출 함수 표현식)를 함수 팩토리로 사용

이 문제를 해결하려면 i 값을 인수로 전달하여 각 링크에 대해 IIFE를 생성합니다.

<code class="javascript">function addLinks() {
  for (var i = 0; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;

    // IIFE used as a function factory
    link.onclick = (function (num) {
      return function () {
        alert(num);
      };
    })(i);
    document.body.appendChild(link);
  }
}</code>

이 버전에서 각 IIFE는 i 값이 고정되는 격리된 범위를 생성합니다. 함수가 생성된 시간. 이렇게 하면 클릭한 순서에 관계없이 각 링크 요소에 고유한 i의 개인 복사본이 있습니다.

대체 접근 방식: 함수 생성기

또 다른 옵션은 다음과 같습니다. 함수 생성기를 사용하여 i의 현재 값을 참조하는 함수를 생성하려면:

<code class="javascript">function generateMyHandler(x) {
  return function () {
    alert(x);
  };
}

for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = generateMyHandler(i);
  document.body.appendChild(link);
}</code>

이 경우 generateMyHandler 함수는 해당 시점에 특정 i 값에 바인딩된 새 함수를 반환합니다. 함수 호출.

JavaScript 클로저가 변수를 캡처하는 방법을 이해하고 적절한 기술을 사용하여 격리된 범위를 생성함으로써 개발자는 공유 변수와 관련된 복잡한 루프 시나리오를 효과적으로 처리할 수 있습니다.

위 내용은 루프의 클로저로 인해 모든 링크가 동일한 값을 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!