JavaScript 루프에서 클로저를 사용할 때 각 클로저가 올바른 값을 캡처하는지 어떻게 확인할 수 있습니까?

JavaScript 루프의 클로저: 실제 예

JavaScript에서는 루프 내에서 클로저를 사용할 때 일반적인 문제가 발생합니다. 클로저로 캡처한 변수가 예상 값이 아닙니다.

문제:

var 키워드를 사용하여 루프 내에서 함수를 정의할 때 모든 함수는 클로저 외부에서 동일한 변수를 참조합니다. 고리. 이는 아래 코드에서 볼 수 있듯이 예상치 못한 결과로 이어질 수 있습니다.

<code class="js">var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

이 코드를 실행하면 "My value: 3"이 0에서 2로 증가할 것으로 예상되지만 3번 인쇄됩니다.

솔루션:

ES6 솔루션: Let

ECMAScript 6(ES6)에서 let 키워드는 변수에 대한 블록 범위를 도입합니다. 이 문제를 해결합니다. let을 사용하면 루프를 반복할 때마다 범위가 루프로 제한된 새 변수 i가 생성됩니다.

<code class="js">for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

ES5.1 솔루션: forEach

환경에서 Array.prototype.forEach 함수를 지원하는 경우 고유한 특성을 활용하여 각 반복마다 고유한 클로저를 생성할 수 있습니다. 콜백 함수는 배열의 현재 요소를 매개변수로 수신하여 각 함수가 고유한 값을 캡처하도록 합니다.

<code class="js">var funcs = [];
[0, 1, 2].forEach(function(i) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
});</code>

기본 솔루션: 클로저

클래식 해결책은 변수를 루프 외부의 특정 값에 바인딩하는 클로저를 만드는 것입니다. 이는 원하는 값을 캡처하는 새 함수를 반환함으로써 달성됩니다.

<code class="js">for (var i = 0; i < 3; i++) {
  funcs[i] = (function(i) {
    return function() {
      console.log("My value:", i);
    };
  })(i);
}</code>

i를 내부 함수에 인수로 전달하여 각 클로저가 올바른 값을 캡처하도록 보장합니다.

위 내용은 JavaScript 루프에서 클로저를 사용할 때 각 클로저가 올바른 값을 캡처하는지 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!