루프 내부의 JavaScript 클로저가 변수 범위 지정을 중단할 수 있습니까?

루프 내부의 JavaScript 클로저: 간단한 실제 예

JavaScript에서 루프를 사용하여 인덱스 또는 값을 기록하는 함수를 만들 때 일반적인 문제가 발생합니다. 다른 값을 기록하려고 했음에도 불구하고 변수 범위 지정의 특성으로 인해 모든 함수가 동일한 값을 기록하는 경우가 많습니다.

문제

다음 코드를 고려하세요.

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

for (var j = 0; j < 3; j++) {
  funcs[j](); // Outputs: "My value: 3" three times
}</code>

"내 값: 0", "내 값: 1", "내 값: 2"를 출력하는 대신 "내 값: 3"을 3번 기록합니다. 이 동작은 이벤트 리스너 또는 비동기 코드 사용을 포함한 다양한 시나리오에서 지속됩니다.

해결책 1: ES6 let

ES6에서는 바깥쪽 블록으로 범위가 지정된 변수를 생성하는 let 키워드를 도입합니다. 루프에서 let을 사용하면 각 함수에 고유한 변수가 있습니다.

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

해결책 2: ES5.1 forEach

배열 반복과 관련된 시나리오의 경우 forEach 방법은 편리한 솔루션을 제공합니다. forEach 루프의 각 콜백에는 각 반복마다 고유한 변수를 제공하는 자체 클로저가 있습니다.

<code class="javascript">someArray.forEach(function(arrayElement) {
  console.log("My value:", arrayElement);
});</code>

해결책 3: 클래식 클로저

이전 JavaScript 버전에서는 클로저를 사용할 수 있습니다. 변수를 함수 내의 특정 값에 바인딩하려면:

<code class="javascript">var funcs = [];

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

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

위 내용은 루프 내부의 JavaScript 클로저가 변수 범위 지정을 중단할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!