JavaScript 루프의 클로저 변수 참조 문제를 해결하는 방법은 무엇입니까?

루프 내부의 JavaScript 클로저: 문제 및 해결 방법 이해

var 키워드를 사용하여 변수 선언이 있는 루프 내부에서 클로저를 사용할 때 문제가 발생합니다. . 클로저는 변수를 포함하여 정의된 환경을 캡처하고 함수가 종료된 후에도 이에 대한 참조를 생성합니다. 이로 인해 루프 실행 중에 캡처된 변수의 값이 변경될 때 예기치 않은 동작이 발생할 수 있습니다.

문제:

다음 코드를 고려하세요.

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

이 코드는 세 번 반복되는 루프를 생성합니다. 각 반복 내에서 함수가 정의되고 배열에 저장됩니다. 예상되는 출력은 다음과 같습니다.

<code>My value: 0
My value: 1
My value: 2</code>

그러나 실제 출력은 다음과 같습니다.

<code>My value: 3
My value: 3
My value: 3</code>

이는 변수 i가 클로저에 의해 캡처되고 최종으로 업데이트되기 때문입니다. 클로저가 실행되기 전 값 3.

ES6 해결 방법: 'let' 키워드 사용

ECMAScript 6(ES6)에는 블록을 생성하는 let 키워드가 도입되었습니다. -범위 변수. 이 예에서는 var 대신 let을 사용하여 각 반복마다 새 변수 i를 생성할 수 있습니다.

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

이번에는 각 클로저가 고유한 i 변수를 캡처하고 예상되는 출력을 얻습니다. .

ES5.1 솔루션: 'forEach'

JavaScript의 Array.prototype.forEach 메서드를 사용하면 배열을 반복하는 깔끔한 방법을 제공합니다. forEach에 전달된 각 콜백 함수는 현재 요소 주위에 고유한 클로저를 가져옵니다.

<code>var someArray = [ /* whatever */ ];
someArray.forEach(function(element) {
  // Code specific to this element
});</code>

클래식 솔루션: 클로저 사용

클로저는 변수를 다음에 바인딩하는 데 사용할 수 있습니다. 함수 외부의 특정 값:

<code>function createfunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}</code>

여기서 createfunc를 사용하여 i 특정 클로저를 만든 다음 funcs 배열에 저장합니다. 이러한 각 클로저가 실행될 때 해당 i 변수를 참조하여 올바른 출력이 생성됩니다.

위 내용은 JavaScript 루프의 클로저 변수 참조 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!