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]();
}

Wyprowadza to:

Moja wartość: 3
Moja wartość: 3
Moja wartość: 3

Podczas gdy chciałbym, aby generowało:

Moja wartość: 0
Moja wartość: 1
Moja wartość: 2

Ten sam problem występuje, gdy opóźnienie w uruchomieniu funkcji jest spowodowane użyciem detektorów zdarzeń:

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>

… Lub kod asynchroniczny, np. Używając Promises:

// 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));
}

Edit: Jest to również widoczne w for ini for ofpętle:

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();
}

Jakie jest rozwiązanie tego podstawowego problemu?

Problem polega na tym, że zmienna iw obrębie każdej z twoich anonimowych funkcji jest powiązana z tą samą zmienną poza funkcją.

Klasyczne rozwiązanie: zamknięcia

To, co chcesz zrobić, to powiązać zmienną w ramach każdej funkcji z osobną, niezmienną wartością poza funkcją:

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]();
}

Ponieważ w JavaScript nie ma zakresu bloków - tylko zakres funkcji - zawijając tworzenie funkcji w nowej funkcji, upewniasz się, że wartość „i” pozostaje zgodna z przeznaczeniem.

Rozwiązanie ES5.1: forEach

Przy stosunkowo powszechnej dostępności Array.prototype.forEachfunkcji (w 2015 r.) Warto zauważyć, że w sytuacjach, w których iteracja dotyczy przede wszystkim szeregu wartości, .forEach()zapewnia czysty, naturalny sposób uzyskania wyraźnego zamknięcia każdej iteracji. Oznacza to, że zakładając, że masz jakąś tablicę zawierającą wartości (odniesienia DOM, obiekty, cokolwiek), a powstanie problem z ustawieniem wywołań zwrotnych specyficznych dla każdego elementu, możesz to zrobić:

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

Chodzi o to, że każde wywołanie funkcji zwrotnej używanej z .forEachpętlą będzie miało własne zamknięcie. Parametrem przekazanym do tej procedury obsługi jest element tablicy specyficzny dla tego konkretnego kroku iteracji. Jeśli zostanie użyty w asynchronicznym wywołaniu zwrotnym, nie zderzy się z żadnym innym wywołaniem zwrotnym ustanowionym na innych etapach iteracji.

Jeśli akurat pracujesz w jQuery, $.each()funkcja daje podobne możliwości.

Rozwiązanie ES6: let

ECMAScript 6 (ES6) wprowadza nowe leti constsłowa kluczowe, których zakres różni się od varzmiennych opartych na zmiennych. Na przykład w pętli z letindeksem bazowym każda iteracja przez pętlę będzie miała nową zmienną io zasięgu pętli, więc kod będzie działał zgodnie z oczekiwaniami. Istnieje wiele zasobów, ale polecam post z zakresu bloków 2ality jako świetne źródło informacji.

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

Uważaj jednak, że IE9-IE11 i Edge wcześniejsze niż Edge 14 obsługują letpowyższe błędy, ale źle to robią (nie tworzą nowego za ikażdym razem, więc wszystkie powyższe funkcje rejestrowałyby 3 tak, jak gdybyśmy tego użyli var). Edge 14 w końcu to dobrze robi.

Próbować:

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]();
}

Edycja (2014):

Osobiście myślę, że @ Aust's najnowsza odpowiedź temat używania.bind jest najlepszym sposobem na zrobienie tego rodzaju rzeczy teraz. Istnieje również wersja lo-kreska / podkreślenia jest _.partial, kiedy nie potrzebują lub chcą zadzierać z bind„s thisArg.

Innym sposobem, o którym jeszcze nie wspomniano, jest użycie 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]();
}

AKTUALIZACJA

Jak wskazują @squint i @mekdev, lepszą wydajność uzyskuje się, tworząc najpierw funkcję poza pętlą, a następnie wiążąc wyniki w pętli.

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]();
}

Za pomocą wyrażenia funkcji natychmiast wywołanego , najprostszy i najbardziej czytelny sposób na zamknięcie zmiennej indeksu:

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);

}

To wysyła iterator ido anonimowej funkcji, którą definiujemy jako index. Tworzy to zamknięcie, w którym zmienna izostaje zapisana do późniejszego wykorzystania w dowolnej funkcji asynchronicznej w IIFE.

Trochę za późno na imprezę, ale dzisiaj zgłębiałem ten problem i zauważyłem, że wiele odpowiedzi nie do końca odnosi się do tego, jak JavaScript traktuje zakresy, co w gruncie rzeczy sprowadza się do tego.

Tak jak wielu innych wspomniano, problemem jest to, że funkcja wewnętrzna odnosi się do tej samej izmiennej. Dlaczego więc po prostu nie tworzymy nowej zmiennej lokalnej przy każdej iteracji i zamiast tego mamy odwołanie do funkcji wewnętrznej?

//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]();
}

Tak jak poprzednio, gdzie każda funkcja wewnętrzna generowała ostatnią przypisaną wartość i, teraz każda funkcja wewnętrzna tylko wyświetla ostatnią przypisaną wartość ilocal. Ale nie każda iteracja powinna mieć swoją własnąilocal ?

Okazuje się, że to jest problem. Każda iteracja ma ten sam zakres, więc każda iteracja po pierwszej jest po prostu nadpisywana ilocal. Z MDN :

Ważne: JavaScript nie ma zasięgu blokowego. Zmienne wprowadzone wraz z blokiem mają zakres obejmujący funkcję lub skrypt, a efekty ich ustawienia utrzymują się poza samym blokiem. Innymi słowy, instrukcje blokowe nie wprowadzają zakresu. Chociaż „samodzielne” bloki są poprawną składnią, nie chcesz używać samodzielnych bloków w JavaScript, ponieważ nie robią tego, co myślisz, że robią, jeśli uważasz, że robią coś takiego jak takie bloki w C lub Java.

Podkreślono dla podkreślenia:

JavaScript nie ma zasięgu blokowego. Zmienne wprowadzane za pomocą bloku mają zakres obejmujący funkcję lub skrypt

Możemy to sprawdzić, sprawdzając, ilocalzanim zadeklarujemy to w każdej iteracji:

//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;
}

Właśnie dlatego ten błąd jest tak trudny. Nawet jeśli ponownie zmieniasz zmienną, JavaScript nie wyśle ​​błędu, a JSLint nawet nie wyśle ​​ostrzeżenia. Dlatego też najlepszym sposobem rozwiązania tego jest skorzystanie z zamknięć, co jest w istocie ideą, że w Javascripcie funkcje wewnętrzne mają dostęp do zmiennych zewnętrznych, ponieważ wewnętrzne zakresy „otaczają” zewnętrzne zakresy.

Oznacza to również, że funkcje wewnętrzne „trzymają” zewnętrzne zmienne i utrzymują je przy życiu, nawet jeśli funkcja zewnętrzna powróci. Aby to wykorzystać, tworzymy i wywołujemy funkcję otoki wyłącznie w celu utworzenia nowego zakresu, zadeklarowania ilocalw nowym zakresie i zwrócenia używanej funkcji wewnętrznej ilocal(więcej wyjaśnień poniżej):

//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]();
}

Utworzenie funkcji wewnętrznej w funkcji opakowania daje funkcji wewnętrznej prywatne środowisko, do którego tylko on może uzyskać dostęp, „zamknięcie”. Dlatego za każdym razem, gdy wywołujemy funkcję otoki, tworzymy nową funkcję wewnętrzną z własnym oddzielnym środowiskiem, zapewniając, że ilocalzmienne się nie kolidują i nie nadpisują. Kilka drobnych optymalizacji daje ostateczną odpowiedź, którą podało wielu innych użytkowników 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);
    };
}

Aktualizacja

Dzięki ES6 mainstream możemy teraz używać nowego letsłowa kluczowego do tworzenia zmiennych o zasięgu blokowym:

//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]();
}

Zobacz, jakie to jest teraz łatwe! Aby uzyskać więcej informacji, zobacz tę odpowiedź , na której oparte są moje informacje.

Dzięki obecnie szeroko wspieranemu ES6 najlepsza odpowiedź na to pytanie uległa zmianie. ES6 zapewnia słowa kluczowe leti constdla tej dokładnej okoliczności. Zamiast bawić się zamknięciami, możemy po prostu letustawić zmienną zakresu pętli w następujący sposób:

var funcs = [];

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

valwskaże wówczas obiekt specyficzny dla tego konkretnego obrotu pętli i zwróci prawidłową wartość bez dodatkowego zapisu zamknięcia. To oczywiście znacznie upraszcza ten problem.

constjest podobny do letdodatkowego ograniczenia, że ​​nazwa zmiennej nie może zostać ponownie powiązana z nowym odwołaniem po początkowym przypisaniu.

Obsługa przeglądarek jest teraz dostępna dla tych, którzy celują w najnowsze wersje przeglądarek. const/ letsą obecnie obsługiwane w najnowszych przeglądarkach Firefox, Safari, Edge i Chrome. Jest również obsługiwany w węźle i można go używać w dowolnym miejscu, korzystając z narzędzi do budowania, takich jak Babel. Możesz zobaczyć działający przykład tutaj: http://jsfiddle.net/ben336/rbU4t/2/

Dokumenty tutaj:

• const
• pozwolić

Uważaj jednak, że IE9-IE11 i Edge wcześniejsze niż Edge 14 obsługują letpowyższe błędy, ale źle to robią (nie tworzą nowego za ikażdym razem, więc wszystkie powyższe funkcje rejestrowałyby 3 tak, jak gdybyśmy tego użyli var). Edge 14 w końcu to dobrze robi.

Innym sposobem powiedzenia jest to, że i funkcja jest związana w momencie wykonywania funkcji, a nie w momencie jej tworzenia.

Podczas tworzenia zamknięcia ijest odwołaniem do zmiennej zdefiniowanej w zakresie zewnętrznym, a nie jej kopią z okresu, w którym utworzono zamknięcie. Zostanie to ocenione w momencie wykonania.

Większość pozostałych odpowiedzi zapewnia sposoby obejścia problemu poprzez utworzenie innej zmiennej, która nie zmieni wartości dla Ciebie.

Pomyślałem, że dodam wyjaśnienie dla jasności. Dla rozwiązania osobiście wybrałbym rozwiązanie Harto, ponieważ jest to najbardziej oczywisty sposób na zrobienie tego z odpowiedzi tutaj. Dowolny opublikowany kod będzie działał, ale wybrałbym fabrykę zamykania zamiast pisania stosu komentarzy, aby wyjaśnić, dlaczego ogłaszam nową zmienną (Freddy i 1800) lub dziwnie osadzoną składnię zamknięcia (apphacker).

To, co musisz zrozumieć, to zakres zmiennych w javascript oparty na funkcji. Jest to ważna różnica niż powiedzmy c #, gdzie masz zakres blokowy, a po prostu skopiowanie zmiennej do zmiennej wewnątrz for będzie działać.

Zawinięcie go w funkcję, która ocenia zwracanie funkcji, tak jak odpowiedź apphackera, załatwi sprawę, ponieważ zmienna ma teraz zasięg funkcji.

Istnieje także słowo kluczowe let zamiast var, które pozwoliłoby na użycie reguły zasięgu bloku. W takim przypadku zdefiniowanie zmiennej wewnątrz for by załatwiło sprawę. To powiedziawszy, słowo kluczowe let nie jest praktycznym rozwiązaniem ze względu na kompatybilność.

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]();
}

Oto kolejna odmiana techniki, podobna do Bjorna (apphacker), która pozwala przypisać wartość zmiennej do funkcji zamiast przekazywać ją jako parametr, co czasem może być jaśniejsze:

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

Zauważ, że niezależnie od zastosowanej techniki indexzmienna staje się rodzajem zmiennej statycznej, związanej ze zwróconą kopią funkcji wewnętrznej. To znaczy zmiany wartości są zachowywane między połączeniami. Może być bardzo przydatny.

Opisuje to powszechny błąd związany z używaniem zamknięć w JavaScript.

Funkcja definiuje nowe środowisko

Rozważać:

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

Przy każdym makeCounterwywołaniu {counter: 0}powoduje utworzenie nowego obiektu. Tworzona jest również nowa kopia pliku, obj aby odwoływać się do nowego obiektu. Tak więc counter1i counter2są od siebie niezależni.

Zamknięcia w pętlach

Użycie zamknięcia w pętli jest trudne.

Rozważać:

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

Zauważ, że counters[0]i counters[1]to nie niezależne. W rzeczywistości działają na tym samym obj!

Jest tak, ponieważ istnieje tylko jedna kopia objwspółdzielona we wszystkich iteracjach pętli, być może ze względu na wydajność. Mimo że {counter: 0}w każdej iteracji tworzy nowy obiekt, ta sama kopia objzostanie zaktualizowana o odniesienie do najnowszego obiektu.

Rozwiązaniem jest użycie innej funkcji pomocnika:

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);
  }
}

Działa to, ponieważ zmienne lokalne w zakresie funkcji bezpośrednio, a także zmienne argumentów funkcji, otrzymują nowe kopie po wejściu.

Najprostszym rozwiązaniem byłoby

Zamiast używać:

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

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

który ostrzega „2” 3 razy. Wynika to z faktu, że anonimowe funkcje utworzone w pętli dzielą to samo zamknięcie, aw tym zamknięciu wartość ijest taka sama. Użyj tego, aby zapobiec wspólnemu zamknięciu:

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]();
}

Ideą tego jest otoczenie całego ciała pętli for za pomocą IIFE (Natychmiastowe wywołanie wyrażenia funkcji) i przekazanie go new_ijako parametru i przechwycenie go jako i. Ponieważ anonimowa funkcja jest wykonywana natychmiast,i wartość jest inna dla każdej funkcji zdefiniowanej w funkcji anonimowej.

To rozwiązanie wydaje się pasować do każdego takiego problemu, ponieważ będzie wymagało minimalnych zmian w oryginalnym kodzie cierpiącym na ten problem. W rzeczywistości jest to zgodne z projektem, nie powinno to wcale stanowić problemu!

spróbuj tego krótszego

• bez tablicy

• bez dodatkowych pętli

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

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

http://jsfiddle.net/7P6EN/

Oto proste rozwiązanie, które wykorzystuje forEach(działa z powrotem do 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
}

Wydruki:

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

Głównym problemem z kodem pokazanym przez OP jest to, że inigdy nie jest odczytywany aż do drugiej pętli. Aby to zademonstrować, wyobraź sobie, że widzisz błąd w kodzie

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

Błąd faktycznie nie występuje, dopóki nie funcs[someIndex]zostanie wykonany (). Korzystając z tej samej logiki, powinno być oczywiste, że wartość parametru irównież nie jest gromadzona aż do tego momentu. Gdy oryginalna pętla zakończy się, i++doprowadza ido wartości, 3która powoduje i < 3awarię warunku i zakończenie pętli. W tym momencie ijest 3i kiedy funcs[someIndex]()jest używany, orazi jest oceniany, wynosi 3 - za każdym razem.

Aby temu zaradzić, musisz ocenić, ijak się napotyka. Pamiętaj, że stało się to już w formiefuncs[i] (gdzie istnieją 3 unikalne indeksy). Istnieje kilka sposobów na uchwycenie tej wartości. Jednym z nich jest przekazanie go jako parametru do funkcji, która jest pokazana na kilka sposobów już tutaj.

Inną opcją jest zbudowanie obiektu funkcji, który będzie mógł zamknąć zmienną. Można to w ten sposób osiągnąć

jsFiddle Demo

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

Funkcje JavaScript „zamykają” zakres, do którego mają dostęp po deklaracji i zachowują dostęp do tego zakresu, nawet gdy zmienne w tym zakresie się zmieniają.

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]()
}

Każda funkcja w powyższej tablicy zamyka się w zakresie globalnym (globalnym, po prostu dlatego, że jest to zakres, w którym zostały zadeklarowane).

Później wywoływane są te funkcje, które rejestrują najnowszą wartość iw zakresie globalnym. To magia i frustracja zamknięcia.

„Funkcje JavaScript zamykają się w zakresie, w którym zostały zadeklarowane, i zachowują dostęp do tego zakresu, nawet gdy zmieniają się wartości zmiennych wewnątrz tego zakresu”.

Użycie letzamiast tego varrozwiązuje, tworząc nowy zakres za każdym razem, gdy forpętla się uruchamia, tworząc oddzielny zakres dla każdej funkcji do zamknięcia. Różne inne techniki robią to samo z dodatkowymi funkcjami.

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]()
}

( letpowoduje, że zmienne mają zakres blokowy. Bloki są oznaczone nawiasami klamrowymi, ale w przypadku pętli for zmienna inicjalizacyjna, iw naszym przypadku, jest uważana za zadeklarowaną w nawiasach klamrowych).

Po przeczytaniu różnych rozwiązań chciałbym dodać, że powodem ich działania jest poleganie na koncepcji łańcucha zasięgu . Jest to sposób, w jaki JavaScript rozpoznaje zmienną podczas wykonywania.

• Każda definicja funkcji tworzy zakres składający się ze wszystkich zmiennych lokalnych zadeklarowanych przez vari jego arguments.
• Jeśli mamy funkcję wewnętrzną zdefiniowaną w innej (zewnętrznej) funkcji, tworzy to łańcuch i będzie używana podczas wykonywania
• Po uruchomieniu funkcji środowisko wykonawcze ocenia zmienne, przeszukując łańcuch zasięgu . Jeśli zmienna może zostać znaleziona w pewnym punkcie łańcucha, przestanie ją wyszukiwać i użyje jej, w przeciwnym razie będzie kontynuowana aż do osiągnięcia globalnego zasięgu, do którego należy window.

W kodzie początkowym:

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

Po funcswykonaniu łańcuch zasięgu będzie function inner -> global. Ponieważ zmiennej inie można znaleźć w function inner(ani zadeklarowanej, varani przekazanej jako argumenty), kontynuuje wyszukiwanie, dopóki wartość parametru nie izostanie ostatecznie znaleziona w zasięgu globalnym, który jest window.i.

Zawinięcie go w funkcję zewnętrzną albo wyraźnie zdefiniuj funkcję pomocnika, jak harto, albo użyj funkcji anonimowej, jak 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

Kiedy funcszostanie wykonany, teraz będzie zasięg łańcucha function inner -> function outer. Ten czas imożna znaleźć w zakresie funkcji zewnętrznej, która jest wykonywana 3 razy w pętli for, za każdym razem ipoprawnie przypisana wartość . Nie będzie używał wartości window.ipo wykonaniu wewnętrznym.

Więcej szczegółów można znaleźć tutaj
Obejmuje to powszechny błąd w tworzeniu zamknięcia w pętli, co mamy tutaj, a także dlaczego potrzebujemy zamknięcia i rozważenia dotyczące wydajności.

Dzięki nowym funkcjom zakresu blokowania ES6 zarządza się:

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
}

Kod w pytaniu OP zastępuje się letzamiast var.

Dziwi mnie, że nikt jeszcze nie zasugerował użycia tej forEachfunkcji, aby lepiej unikać (ponownie) używania zmiennych lokalnych. W rzeczywistości nie używam for(var i ...)już z tego powodu.

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

// edytowane do użycia forEachzamiast mapy.

To pytanie naprawdę pokazuje historię JavaScript! Teraz możemy uniknąć skalowania bloków za pomocą funkcji strzałek i obsługiwać pętle bezpośrednio z węzłów DOM przy użyciu metod Object.

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>

Pierwotny przykład nie działał, ponieważ wszystkie zamknięcia utworzone w pętli odnosiły się do tej samej ramki. W efekcie posiadanie 3 metod na jednym obiekcie z tylko jedną izmienną. Wszystkie wydrukowały tę samą wartość.

Przede wszystkim zrozum, co jest nie tak z tym kodem:

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
}

Tutaj, gdy funcs[]tablica jest inicjowana, ijest zwiększana, funcstablica jest inicjalizowana, a rozmiar functablicy staje się 3, więc i = 3,. Teraz, gdy funcs[j]()jest wywoływane, ponownie używa zmiennej i, która została już zwiększona do 3.

Teraz, aby rozwiązać ten problem, mamy wiele opcji. Poniżej dwa z nich:

1. Możemy zainicjować iz letlub zainicjować nową zmienną indexz leti uczynić go równym i. Kiedy połączenie zostanie wykonane, indexzostanie użyte, a jego zakres zakończy się po inicjalizacji. I dla połączeń indexzostanie ponownie zainicjowany:

   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. Inną opcją może być wprowadzenie tempFunczwracającej rzeczywistą funkcję:

   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]();                        
   }

Użyj struktury zamknięcia , zmniejszy to dodatkową pętlę for. Możesz to zrobić w jednej pętli for:

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

Sprawdzimy, co się właściwie stanie, gdy złożysz deklarację vari let jeden po drugim.

Przypadek 1 : za pomocąvar

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

Teraz otwórz okno konsoli chrome , naciskając F12 i odśwież stronę. Rozwijaj co 3 funkcje w tablicy. Zobaczysz właściwość o nazwie [[Scopes]].Rozwiń tę. Zobaczysz jeden obiekt tablicy o nazwie "Global", rozwiń go. Znajdziesz w obiekcie 'i'zadeklarowaną właściwość o wartości 3.

Wniosek:

1. Gdy deklarujesz zmienną za 'var'pomocą funkcji spoza funkcji, staje się zmienną globalną (możesz to sprawdzić, wpisując ilub window.iw oknie konsoli. Zwróci 3).
2. Zdeklarowana funkcja nie wywoła i nie sprawdzi wartości wewnątrz funkcji, chyba że wywołasz funkcje.
3. Po wywołaniu funkcji console.log("My value: " + i)pobiera wartość z Globalobiektu i wyświetla wynik.

PRZYPADEK 2: użycie let

Teraz wymienić 'var'z'let'

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

Zrób to samo, przejdź do lunety. Teraz zobaczysz dwa obiekty "Block"i "Global". Teraz rozwiń Blockobiekt, zobaczysz, że jest tam zdefiniowane „i”, a dziwne jest to, że dla każdej funkcji wartość if ijest różna (0, 1, 2).

Wniosek:

Kiedy zadeklarujesz zmienną, używając 'let'nawet poza funkcją, ale wewnątrz pętli, ta zmienna nie będzie zmienną globalną, stanie się Blockzmienną poziomu, która jest dostępna tylko dla tej samej funkcji. Z tego powodu otrzymujemy wartość iróżnej dla każdej funkcji, gdy wywołujemy funkcje.

Aby uzyskać więcej informacji na temat tego, jak bliżej to działa, przejdź do niesamowitego samouczka wideo https://youtu.be/71AtaJpJHw0

Można użyć modułu deklaratywnego do list danych, takich jak query-js (*). W tych sytuacjach osobiście uważam, że deklaratywne podejście jest mniej zaskakujące

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

Następnie możesz użyć drugiej pętli i uzyskać oczekiwany wynik lub możesz to zrobić

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

(*) Jestem autorem zapytania-js i dlatego jestem skłonny do korzystania z niego, więc nie traktuj moich słów jako rekomendacji dla wspomnianej biblioteki tylko dla deklaratywnego podejścia :)

Wolę używać forEachfunkcji, która ma swoje własne zamknięcie z tworzeniem pseudo zakresu:

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
}

To wygląda brzydiej niż zakresy w innych językach, ale IMHO jest mniej monstrualne niż inne rozwiązania.

I jeszcze jedno rozwiązanie: zamiast tworzyć kolejną pętlę, po prostu powiąż thisfunkcję return.

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
}

Wiążąc to , rozwiązuje również problem.

Wiele rozwiązań wydaje się poprawnych, ale nie wspominają o nazwie, Curryingktóra jest funkcjonalnym wzorcem projektowym programowania w sytuacjach takich jak tutaj. 3-10 razy szybszy niż bindowanie w zależności od przeglądarki.

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);
  }
}

Zobacz wzrost wydajności w różnych przeglądarkach .

Twój kod nie działa, ponieważ działa:

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?

Pytanie brzmi: jaka jest wartość zmiennej iprzy wywołaniu funkcji? Ponieważ pierwsza pętla jest tworzona z warunkiem i < 3, zatrzymuje się natychmiast, gdy warunek jest fałszywy, więc tak jest i = 3.

Musisz zrozumieć, że w czasie tworzenia funkcji żaden z ich kodów nie jest wykonywany, jest on zapisywany tylko na później. Kiedy więc zostaną wezwani później, interpreter wykonuje je i pyta: „Jaka jest obecna wartość i?”

Twoim celem jest więc najpierw zapisanie wartości ifunkcji, a dopiero potem zapisanie funkcji w funcs. Można to zrobić na przykład w następujący sposób:

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
}

W ten sposób każda funkcja będzie miała swoją zmienną xi ustawiamy xją na wartość iw każdej iteracji.

To tylko jeden z wielu sposobów rozwiązania tego problemu.

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
}

Użyj let (block-scope) zamiast var.

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]();                      
}