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

루프의 JavaScript 클로저: Demystified

클로저 이해

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

루프의 클로저 관련 문제

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

<code class="javascript">for (var i = 0; i <p>이 예에서 내부 함수에 num으로 전달된 i 값은 모든 링크 요소에 걸쳐 "공유 변수"를 생성하는 클로저에 의해 캡처됩니다. 즉, 링크를 클릭하면 항상 i의 마지막 값(이 경우 4)이 표시됩니다.</p>
<p><strong>IIFE(즉시 호출 함수 표현식)를 함수 팩토리로 사용</strong></p>
<p>이 문제를 해결하려면 i 값을 인수로 전달하여 각 링크에 대해 IIFE를 생성합니다.</p>
<pre class="brush:php;toolbar:false"><code class="javascript">function addLinks() {
  for (var i = 0; i <p>이 버전에서 각 IIFE는 i 값이 고정되는 격리된 범위를 생성합니다. 함수가 생성된 시간. 이렇게 하면 클릭한 순서에 관계없이 각 링크 요소에 고유한 i의 개인 복사본이 있습니다.</p>
<p><strong>대체 접근 방식: 함수 생성기</strong></p>
<p>또 다른 옵션은 다음과 같습니다. 함수 생성기를 사용하여 i의 현재 값을 참조하는 함수를 생성하려면:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">function generateMyHandler(x) {
  return function () {
    alert(x);
  };
}

for (var i = 0; i <p>이 경우 generateMyHandler 함수는 해당 시점에 특정 i 값에 바인딩된 새 함수를 반환합니다. 함수 호출.</p>
<p>JavaScript 클로저가 변수를 캡처하는 방법을 이해하고 적절한 기술을 사용하여 격리된 범위를 생성함으로써 개발자는 공유 변수와 관련된 복잡한 루프 시나리오를 효과적으로 처리할 수 있습니다.</p></code>

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