JavaScript의 루프 내에서 함수를 생성할 때 클로저 문제를 방지하는 방법은 무엇입니까?

루프 내부의 JavaScript 클로저 - 실제 예

JavaScript의 루프 내에서 함수를 생성할 때 클로저 가능성을 인식하는 것이 중요합니다. 해당 함수에 사용된 변수가 실수로 동일한 값에 바인딩될 수 있는 문제입니다. 이로 인해 특히 지연이 포함된 경우 예상치 못한 동작이 발생할 수 있습니다.

문제 설명

다음 코드를 고려하세요.

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

의도된 출력 is:

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

그러나 이 코드는 실제로 다음을 출력합니다.

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

이 문제는 익명 함수 내의 i 변수가 루프 외부의 동일한 변수에 바인딩되어 있기 때문에 발생합니다. . 결과적으로 각 함수가 실행될 때 i의 최종 값을 사용하게 됩니다.

ES6 해결 방법: let

ECMAScript 6(ES6)에서 , let 키워드는 블록 범위 변수를 허용합니다. 루프 내에서 let을 사용하면 반복할 때마다 새 변수가 생성되어 클로저 문제가 해결됩니다.

<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">someArray.forEach(function(arrayElement) {
  // ... code for this one element
});</code>

콜백 함수의 각 호출은 전달된 매개변수가 특정하도록 자체 클로저가 됩니다.

클래식 솔루션: 클로저

클로저 문제를 방지하는 또 다른 방법은 클래식 클로저를 사용하는 것입니다. 변하지 않는 가치.

<code class="js">function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}</code>

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