var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

이것을 출력합니다 :

나의 가치 : 3
나의 가치 : 3
나의 가치 : 3

반면 출력을 원합니다.

내 값 : 0
내 값 : 1
내 값 : 2

이벤트 리스너를 사용하여 함수 실행 지연이 발생하는 경우에도 동일한 문제점이 발생합니다.

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value: " + i);
  });
}

<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

또는 비동기 코드 (예 : 약속 사용) :

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

편집 : 그것은 또한 명백 for in하고 for of반복됩니다 :

const arr = [1,2,3];
const fns = [];

for(i in arr){
  fns.push(() => console.log(`index: ${i}`));
}

for(v of arr){
  fns.push(() => console.log(`value: ${v}`));
}

for(f of fns){
  f();
}

이 기본 문제에 대한 해결책은 무엇입니까?

문제는 i각각의 익명 함수 내의 변수가 함수 외부의 동일한 변수에 바인딩되어 있다는 것입니다.

클래식 솔루션 : 마감

당신이하고 싶은 것은 각 함수 내의 변수를 함수 외부의 변하지 않는 별도의 값에 바인딩하는 것입니다.

var funcs = [];

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

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

for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

함수 작성을 새 함수로 랩핑하여 JavaScript에는 함수 범위 만있는 블록 범위가 없으므로 "i"값이 의도 한대로 유지되도록합니다.

ES5.1 솔루션 : forEach

Array.prototype.forEach함수의 가용성이 비교적 넓기 때문에 (2015 년) 반복되는 상황에서 주로 일련의 값을 .forEach()반복하여 모든 반복에 대해 뚜렷한 폐쇄를 얻을 수있는 깨끗하고 자연스러운 방법을 제공 한다는 점은 주목할 가치가 있습니다. 즉, 값 (DOM 참조, 객체 등)을 포함하는 일종의 배열이 있고 각 요소에 특정한 콜백을 설정하는 데 문제가 있다고 가정하면 다음을 수행 할 수 있습니다.

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

.forEach루프 와 함께 사용되는 콜백 함수를 호출 할 때마다 고유 한 클로저가됩니다. 해당 핸들러로 전달 된 매개 변수는 반복의 특정 단계에 고유 한 배열 요소입니다. 비동기 콜백에서 사용되는 경우 반복의 다른 단계에서 설정된 다른 콜백과 충돌하지 않습니다.

jQuery에서 작업 $.each()하는 경우 비슷한 기능을 제공합니다.

ES6 솔루션 : let

ECMAScript 6 (ES6)에는 기반 변수 와 다른 범위의 새로운 키워드 let와 const키워드가 도입되었습니다 var. 예를 들어, let인덱스를 기반 으로하는 루프에서 루프를 반복 할 때마다 i루프 범위를 가진 새 변수 가 있으므로 코드가 예상대로 작동합니다. 많은 자료가 있지만 2ality의 블록 범위 게시물 을 훌륭한 정보 출처로 추천합니다.

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

그러나 Edge 14 이전의 IE9-IE11 및 Edge let는 위의 오류를 지원 하지만 위와 i같은 오류가 발생 var합니다. Edge 14는 마침내 그것을 올바르게 얻습니다.

시험:

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

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

편집 (2014) :

개인적으로 @Aust의 최근 답변은.bind 이러한 종류의 작업을 수행하는 가장 좋은 방법이라고 생각합니다. LO-대시 밑줄의 /도 있습니다 _.partial당신이 필요하거나 건드리고 싶지 않을 때 bind의 thisArg.

아직 언급되지 않은 또 다른 방법은 Function.prototype.bind

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

최신 정보

@squint와 @mekdev에서 지적했듯이 먼저 루프 외부에서 함수를 만든 다음 루프 내에서 결과를 바인딩하면 성능이 향상됩니다.

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

즉시 호출되는 함수 표현식을 사용하여 인덱스 변수를 묶는 가장 간단하고 읽기 쉬운 방법 :

for (var i = 0; i < 3; i++) {

    (function(index) {

        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value:   $.ajax({});
    
    })(i);

}

이것은 i우리가로 정의한 익명 함수로 반복자 를 보냅니다 index. 이렇게하면 iIIFE 내의 비동기 기능에서 나중에 사용하기 위해 변수 가 저장 되는 클로저가 생성 됩니다.

파티에 늦었지만 오늘이 문제를 탐색하고 있었고 많은 답변이 Javascript가 범위를 처리하는 방법을 완전히 다루지 않았 음을 발견했습니다. 이것이 본질적으로 요약됩니다.

많은 다른 사람들이 언급했듯이 문제는 내부 함수가 동일한 i변수를 참조한다는 것 입니다. 그렇다면 매번 반복 할 때마다 새로운 로컬 변수를 만들고 대신 내부 함수 참조를 사용하지 않겠습니까?

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

이전과 마찬가지로 각 내부 함수가에 할당 된 마지막 값을 출력 한 i경우 이제 각 내부 함수는에 할당 된 마지막 값을 출력합니다 ilocal. 그러나 각 반복마다 고유하지 않아야합니다.ilocal 합니까?

그게 문제입니다. 각 반복은 동일한 범위를 공유하므로 첫 번째 이후의 모든 반복은 그냥 덮어 씁니다 ilocal. 에서 MDN :

중요 : JavaScript에는 블록 범위가 없습니다. 블록과 함께 도입 된 변수는 포함 함수 또는 스크립트로 범위가 지정되며 변수 설정의 효과는 블록 자체를 넘어서 유지됩니다. 다시 말해, 블록 명령문은 범위를 도입하지 않습니다. "독립형"블록은 유효한 구문이지만 C 또는 Java에서 이러한 블록과 같은 것으로 생각되면 자신이 생각하는대로하지 않기 때문에 JavaScript에서 독립형 블록을 사용하고 싶지 않습니다.

강조를 위해 반복 :

JavaScript에는 블록 범위가 없습니다. 블록으로 도입 된 변수는 포함 함수 또는 스크립트 범위

ilocal각 반복에서 선언하기 전에 확인하여이를 확인할 수 있습니다 .

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

이것이 바로이 버그가 너무 까다로운 이유입니다. 변수를 다시 선언하더라도 Javascript는 오류를 발생시키지 않으며 JSLint는 경고를 발생시키지 않습니다. 또한이를 해결하는 가장 좋은 방법은 클로저를 활용하는 것입니다. 이는 본질적으로 자바 스크립트에서 내부 범위가 외부 범위를 "포함"하기 때문에 내부 함수가 외부 변수에 액세스 할 수 있다는 아이디어입니다.

이는 내부 함수가 외부 변수를 "유지"하고 외부 함수가 리턴 되더라도 계속 유지함을 의미합니다. 이를 활용하기 위해 순전히 래퍼 함수를 ​​생성하고 호출하여 새 범위를 만들고 새 범위에서 선언 ilocal한 다음 사용하는 내부 함수를 반환합니다 ilocal(아래 설명 참조).

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

랩퍼 함수 내에 내부 함수를 작성하면 내부 함수에만 액세스 할 수있는 "클로저"개인 환경이 제공됩니다. 따라서 래퍼 함수를 ​​호출 할 때마다 자체 별도의 환경으로 새로운 내부 함수를 만들어 ilocal변수가 서로 충돌하고 덮어 쓰지 않도록합니다. 몇 가지 사소한 최적화는 다른 많은 SO 사용자가 제공 한 최종 답변을 제공합니다.

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

최신 정보

이제 ES6을 주류로 삼 으면 새로운 let키워드를 사용하여 블록 범위 변수를 만들 수 있습니다.

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

지금 얼마나 쉬운 지보세요! 자세한 내용은 내 정보가 기반으로하는 this answer을 참조하십시오 .

ES6가 널리 지원됨에 따라이 질문에 대한 최상의 답변이 변경되었습니다. ES6는 이 정확한 상황에 대한 let및 const키워드를 제공합니다 . 클로저를 어지럽히 지 let않고 다음과 같이 루프 범위 변수를 설정하는 데 사용할 수 있습니다 .

var funcs = [];

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

val그런 다음 루프의 특정 회전과 관련된 객체를 가리키고 추가 클로저 표기법없이 올바른 값을 반환합니다. 이것은 분명히이 문제를 단순화시킵니다.

const 비슷하다 let초기 할당 후 변수 이름을 새 참조로 리바운드 할 수 없다는 추가 제한 사항과 합니다.

최신 버전의 브라우저를 대상으로하는 사용자를위한 브라우저 지원이 제공됩니다. const/ let는 현재 최신 Firefox, Safari, Edge 및 Chrome에서 지원됩니다. 또한 Node에서도 지원되며 Babel과 같은 빌드 도구를 활용하여 어디서나 사용할 수 있습니다. 실제 예제를 볼 수 있습니다 : http://jsfiddle.net/ben336/rbU4t/2/

여기 문서 :

• const
• 허락하다

그러나 Edge 14 이전의 IE9-IE11 및 Edge let는 위의 오류를 지원 하지만 위와 i같은 오류가 발생 var합니다. Edge 14는 마침내 그것을 올바르게 얻습니다.

그것을 말하는 또 다른 방법은 i함수를 만들 때가 아니라 함수를 실행할 때 함수 의 in이 바인딩되어 있다는 것입니다.

클로저를 만들 때 i 와 같이 변수의 복사본이 아닌 외부 범위에 정의 된 변수에 대한 참조입니다. 실행 시점에 평가됩니다.

다른 답변의 대부분은 값을 변경하지 않는 다른 변수를 만들어서 해결하는 방법을 제공합니다.

명확성을 위해 설명을 추가한다고 생각했습니다. 해결책은 개인적으로 Harto와 함께 할 것입니다 .Harto의 답변에서 여기에 대한 가장 자명 한 방법이기 때문입니다. 게시 된 코드는 모두 작동하지만 새 변수 (Freddy 및 1800)를 선언하거나 이상한 내장 폐쇄 구문 (apphacker)을 선언하는 이유를 설명하기 위해 주석 더미를 작성 해야하는 폐쇄 공장을 선택합니다.

이해해야 할 것은 자바 스크립트의 변수 범위는 함수를 기반으로한다는 것입니다. 이것은 블록 범위가있는 c #보다 중요한 차이점이며 변수를 for 내부에 복사하면 효과가 있습니다.

변수에 함수 범위가 있으므로 apphacker의 답변과 같은 함수 반환을 평가하는 함수로 그것을 감싸는 것은 트릭을 수행합니다.

var 대신 let 키워드가있어 블록 범위 규칙을 사용할 수 있습니다. 이 경우 for 내부에 변수를 정의하면 트릭을 수행합니다. 즉, let 키워드는 호환성 때문에 실용적인 솔루션이 아닙니다.

var funcs = {};

for (var i = 0; i < 3; i++) {
  let index = i; //add this
  funcs[i] = function() {
    console.log("My value: " + index); //change to the copy
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Bjorn (apphacker)과 유사한이 기술에 대한 또 다른 변형이 있습니다.이 값을 사용하면 변수 값을 매개 변수로 전달하지 않고 함수 내부에 변수 값을 지정할 수 있습니다.

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

어떤 기술을 사용하든 index변수는 일종의 정적 변수가되어 내부 함수의 반환 된 복사본에 바인딩됩니다. 즉, 값을 변경해도 통화간에 유지됩니다. 매우 편리 할 수 ​​있습니다.

이것은 JavaScript에서 클로저를 사용하는 일반적인 실수를 설명합니다.

새로운 환경을 정의하는 함수

치다:

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

매번 makeCounter호출 될 때마다 {counter: 0}새 오브젝트가 작성됩니다. 또한 obj 새 개체를 참조 할 수 있도록 새 복사본 이 만들어집니다. 따라서, counter1및counter2 는 서로 독립적이다.

루프 폐쇄

루프에서 클로저를 사용하는 것은 까다 롭습니다.

치다:

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

공지 사항이 counters[0]와 counters[1]있습니다 하지 독립적. 사실, 그들은 같은에서 작동obj !

obj성능상의 이유로 루프의 모든 반복에서 공유 사본이 하나만 있기 때문입니다 . {counter: 0}반복 할 때마다 새 객체를 생성 하더라도 동일한 사본이obj 이 최신 객체에 대한 참조로 업데이트됩니다.

해결책은 다른 도우미 기능을 사용하는 것입니다.

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

이것은 함수 인수 변수뿐만 아니라 함수 범위의 로컬 변수도 입력시 새 사본이 할당되기 때문에 작동합니다.

가장 간단한 해결책은

사용하는 대신:

var funcs = [];
for(var i =0; i<3; i++){
    funcs[i] = function(){
        alert(i);
    }
}

for(var j =0; j<3; j++){
    funcs[j]();
}

"2"를 3 번 ​​경고합니다. 이는 for 루프에서 생성 된 익명 함수가 동일한 클로저를 공유하며 해당 클로저에서 값이 i동일하기 때문입니다. 공유 폐쇄를 방지하려면 다음을 사용하십시오.

var funcs = [];
for(var new_i =0; new_i<3; new_i++){
    (function(i){
        funcs[i] = function(){
            alert(i);
        }
    })(new_i);
}

for(var j =0; j<3; j++){
    funcs[j]();
}

이에 대한 아이디어는 for 루프의 전체 본문을 IIFE (즉시 호출 함수 표현식)로 캡슐화하고 new_i매개 변수로 전달 하고로 캡처하는 것 i입니다. 익명 함수가 즉시 실행되므로i 되므로 익명 함수 내에 정의 된 각 함수마다 값이 다릅니다.

이 솔루션은이 문제로 고통받는 원래 코드를 최소한으로 변경해야하기 때문에 이러한 문제에 적합합니다. 실제로 이것은 의도적으로 설계된 것이므로 전혀 문제가되지 않습니다!

이 짧은 시도

• 배열 없음

• 추가 for 루프 없음

for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

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

http://jsfiddle.net/7P6EN/

다음은 사용하는 간단한 솔루션입니다 forEach(IE9로 다시 작동).

var funcs = [];
[0,1,2].forEach(function(i) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
})
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

인쇄물:

My value: 0
My value: 1
My value: 2

OP에 의해 표시된 코드의 주요 문제 i는 두 번째 루프까지 읽지 않는다는 것입니다. 시연하기 위해 코드 내부에 오류가 있다고 상상해보십시오.

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

오류는 실제로 funcs[someIndex]실행될 때까지 발생하지 않습니다 (). 이 같은 논리를 사용하면 i이 시점까지 의 값 도 수집되지 않습니다. 원래 루프가 완료되면 조건이 실패하고 루프가 종료 되는 값을 i++가져옵니다 . 이 시점에서 is 등 이 사용되고 평가 될 때 마다 3입니다.i3i < 3i3funcs[someIndex]()i

이 문제를 해결하려면 i문제가 발생한대로 평가해야합니다 . 이것은 이미 funcs[i](3 개의 고유 인덱스가있는) 형식으로 발생했습니다 . 이 값을 캡처하는 방법에는 여러 가지가 있습니다. 하나는 이미 여러 방법으로 표시되는 함수에 매개 변수로 전달하는 것입니다.

또 다른 옵션은 변수를 닫을 수있는 함수 객체를 구성하는 것입니다. 그것은 그렇게 달성 될 수 있습니다

jsFiddle Demo

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

JavaScript 함수는 선언시 액세스 할 수있는 범위를 "닫고"해당 범위의 변수가 변경 되더라도 해당 범위에 대한 액세스 권한을 유지합니다.

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

위의 배열에있는 각 함수는 전역 범위 (전역 적으로 선언 된 범위이기 때문에 전역 범위)를 닫습니다.

나중에 이러한 함수는 i전역 범위에서 가장 최신 값을 기록하여 호출됩니다 . 그것이 폐쇄의 마법과 좌절입니다.

"JavaScript 함수는 선언 된 범위를 닫고 해당 범위 내의 변수 값이 변경 되더라도 해당 범위에 대한 액세스 권한을 유지합니다."

let대신에 var를 사용 하면 for루프가 실행될 때마다 새 범위를 작성하고 각 함수에 대해 분리 된 범위를 작성하여이를 해결할 수 있습니다. 다른 여러 가지 기술은 추가 기능을 사용하여 동일한 작업을 수행합니다.

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

( let변수 범위를 블록으로 만듭니다. 블록은 중괄호로 표시되지만 for 루프의 경우 초기화 변수 i는 중괄호로 선언 된 것으로 간주됩니다.)

다양한 솔루션을 읽은 후 해당 솔루션이 작동하는 이유는 스코프 체인 개념에 의존하기 때문입니다 . JavaScript가 실행 중에 변수를 해결하는 방식입니다.

• 각 함수 정의는 var및로 선언 된 모든 로컬 변수로 구성된 범위를 형성합니다 arguments.
• 내부 함수가 다른 (외부) 함수 안에 정의되어 있으면 체인을 형성하고 실행 중에 사용됩니다
• 함수가 실행될 때 런타임은 범위 체인 을 검색하여 변수를 평가합니다 . 체인의 특정 지점에서 변수를 찾을 수 있으면 검색을 중지하고 사용합니다. 그렇지 않으면 전역 범위에 도달 할 때까지 계속됩니다 window.

초기 코드에서 :

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner's scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

때 funcs실행됩니다, 범위 체인이 될 것입니다 function inner -> global. 변수 i를 찾을 수 없기 때문에 function inner( var인수로 선언 하거나 인수로 전달하지 않음) 값이 i전역 범위 인에서 전역으로 발견 될 때까지 계속 검색 window.i합니다.

외부 함수로 래핑하여 harto 처럼 도우미 함수를 명시 적으로 정의 하거나 Bjorn 처럼 익명 함수를 사용하십시오 .

funcs = {};
function outer(i) {              // function outer's scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

때 funcs실행됩니다, 지금은 범위 체인이 될 것입니다 function inner -> function outer. 이 시간 i은 for 루프에서 3 번 실행되는 외부 함수 범위에서 찾을 수 있으며 매번 값이 i올바르게 바인딩됩니다. window.iinner가 실행될 때 의 값을 사용하지 않습니다 .

더 자세한 내용은 여기 에서 찾을 수 있습니다. 여기
에는 루프에서 클로저를 생성 할 때 발생하는 일반적인 실수와 클로저가 필요한 이유 및 성능 고려 사항이 포함됩니다.

ES6의 새로운 기능으로 블록 레벨 범위가 관리됩니다.

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

OP 질문의 코드는 let대신에 로 대체됩니다 var.

아직 아무도 forEach지역 변수를 사용하지 않는 것이 더 좋습니다. 사실, 나는 for(var i ...)이런 이유로 더 이상 사용하지 않습니다 .

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

// forEach맵 대신 사용하도록 편집했습니다 .

이 질문은 실제로 JavaScript의 역사를 보여줍니다! 이제 화살표 함수로 블록 범위를 피하고 Object 메소드를 사용하여 DOM 노드에서 직접 루프를 처리 할 수 ​​있습니다.

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));

<button>0</button><br>
<button>1</button><br>
<button>2</button>

원래 예제가 작동하지 않은 이유는 루프에서 작성한 모든 클로저가 동일한 프레임을 참조했기 때문입니다. 실제로 하나의 i변수 에 하나의 객체에 3 개의 메소드가 있습니다. 그들은 모두 같은 값을 인쇄했습니다.

우선,이 코드의 문제점을 이해하십시오.

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

여기서 funcs[]배열이 초기화 i되고 증분 될 때 funcs배열이 초기화되고 func배열 의 크기 가 3이됩니다 i = 3,. 이제 funcs[j]()가 호출되면 변수 i는 이미 3으로 증가한 변수를 사용합니다 .

이제이 문제를 해결하기 위해 많은 옵션이 있습니다. 아래는 두 가지입니다.

1. 우리는 초기화 할 수 있습니다 i와 함께 let또는 새로운 변수 초기화 index와를 let하고에 동일하게 i. 따라서 호출이 이루어지면 index사용되며 범위는 초기화 후에 종료됩니다. 그리고 전화를 위해 index다시 초기화됩니다.

   var funcs = [];
   for (var i = 0; i < 3; i++) {          
       let index = i;
       funcs[i] = function() {            
           console.log("My value: " + index); 
       };
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

2. 다른 옵션은 tempFunc실제 함수를 반환하는를 도입 할 수 있습니다 .

   var funcs = [];
   function tempFunc(i){
       return function(){
           console.log("My value: " + i);
       };
   }
   for (var i = 0; i < 3; i++) {  
       funcs[i] = tempFunc(i);                                     
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

클로저 구조를 사용하면 여분의 for 루프가 줄어 듭니다. 단일 for 루프에서 수행 할 수 있습니다.

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

우리는 당신이 선언 할 때 실제로 무슨 일이 확인합니다 var및 let 하나 하나.

Case1 : 사용var

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

이제 F12 를 눌러 크롬 콘솔 창 을 열고 페이지를 새로 고 칩니다 . 배열 내에서 3 개의 함수를 모두 소비하면 [[Scopes]].Expand 라는 속성이 표시됩니다 . 배열이라는 하나의 배열 객체가 표시됩니다 "Global". 'i'값이 3 인 객체에 선언 된 속성을 찾을 수 있습니다.

결론:

1. 'var'함수 외부를 사용하여 변수를 선언하면 전역 변수가됩니다 (입력 i하거나 window.i콘솔 창에서 확인할 수 있습니다 .3을 반환합니다).
2. 선언 한 익명 함수는 함수를 호출하지 않으면 함수 내부의 값을 호출하고 확인하지 않습니다.
3. 함수를 호출하면 객체 console.log("My value: " + i)에서 값을 가져와 Global결과를 표시합니다.

CASE2 : let 사용

이제 교체 'var'와 함께'let'

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

동일한 작업을 수행하십시오. 범위로 이동하십시오. 이제 두 개체 볼 수 "Block"와 "Global". 이제 Block객체를 확장 하면 거기에 'i'가 정의되어 있으며 이상한 점은 모든 함수에 대해 값 i이 다른 경우 값 이 다르다는 것입니다 (0, 1, 2).

결론:

'let'함수 외부에서도 루프 내부에서 변수를 선언하면 이 변수는 전역 변수가 아니며 Block동일한 변수에서만 사용할 수 있는 수준 변수가됩니다. 그 이유는 i다른 값을 얻습니다. 함수를 호출 할 때 각 함수에 대해

더 가까이 작동하는 방법에 대한 자세한 내용은 멋진 비디오 자습서를 참조하십시오 https://youtu.be/71AtaJpJHw0

query-js (*) 와 같은 데이터 목록에 선언적 모듈을 사용할 수 있습니다 . 이러한 상황에서 나는 개인적으로 선언적 접근 방식이 덜 놀랍습니다.

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

그런 다음 두 번째 루프를 사용하여 예상 결과를 얻거나 할 수 있습니다

funcs.iterate(function(f){ f(); });

(*) 나는 query-js의 저자이며 그것을 사용하는 것에 편향되어 있으므로 선언적 접근 방식에 대해서만 상기 라이브러리에 대한 권장 사항으로 내 말을하지 마십시오 :)

forEach의사 범위를 만드는 자체 폐쇄 기능이있는 함수를 선호합니다 .

var funcs = [];

new Array(3).fill(0).forEach(function (_, i) { // creating a range
    funcs[i] = function() {            
        // now i is safely incapsulated 
        console.log("My value: " + i);
    };
});

for (var j = 0; j < 3; j++) {
    funcs[j](); // 0, 1, 2
}

그것은 다른 언어의 범위보다 더 추해 보이지만 IMHO는 다른 솔루션보다 덜 괴물입니다.

그리고 또 다른 해결책 : 다른 루프를 만드는 대신 thisreturn 함수에 바인딩하십시오 .

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

이것을 바인딩 하면 문제도 해결됩니다.

많은 솔루션이 정확 해 보이지만 Currying여기에서는 이러한 상황에 맞는 기능적 프로그래밍 디자인 패턴 이라고 합니다. 브라우저에 따라 바인딩보다 3-10 배 빠릅니다.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

다른 브라우저에서 성능 향상을 확인하십시오 .

코드가 작동하지 않는 이유는 다음과 같습니다.

Create variable `funcs` and assign it an empty array;  
Loop from 0 up until it is less than 3 and assign it to variable `i`;
    Push to variable `funcs` next function:  
        // Only push (save), but don't execute
        **Write to console current value of variable `i`;**

// First loop has ended, i = 3;

Loop from 0 up until it is less than 3 and assign it to variable `j`;
    Call `j`-th function from variable `funcs`:  
        **Write to console current value of variable `i`;**  
        // Ask yourself NOW! What is the value of i?

이제 문제는 i함수가 호출 될 때 변수의 값은 무엇 입니까? 첫 번째 루프는의 조건으로 만들어지기 때문에 i < 3조건이 거짓이면 즉시 중지되므로 i = 3.

함수가 생성 될 때 코드가 실행되지 않으면 나중에 저장하기 만한다는 것을 이해해야합니다. 나중에 호출 될 때, 인터프리터는이를 실행하고 "현재 값은 i무엇입니까?"

따라서 목표는 먼저 ifunction 의 값 을 저장 한 후에 만 ​​함수를에 저장하는 것 funcs입니다. 예를 들어 다음과 같이 수행 할 수 있습니다.

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function(x) {            // and store them in funcs
        console.log("My value: " + x); // each should log its value.
    }.bind(null, i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

이런 식으로 각 함수는 자체 변수를 x가지며 각 반복 x의 값으로 설정합니다 i.

이것은이 문제를 해결하는 여러 가지 방법 중 하나 일뿐입니다.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let's run each one to see with j
}

var 대신 let (blocked-scope)을 사용하십시오.

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