Javascript nie rozumiem fragmentu kodu

Question

Witam, ostatnio gdzieś na forum w którymś z tematów Comaander polecil ksiazke nt. JavaScriptu, uznałem że wezmę się za lekturę. Stwierdziłem, że będe uczył się powoli, ale ze zrozumieniem, utknąłem jednak w pewnym miejscu. Może ktoś wytłumaczyłby mi jakoś 'łopatologiczniej' tą kwestię?

 

IIFE use case: inadvertent sharing via closures

Closures keep their connections to outer variables, which is sometimes not what you want:

var result = [];
for (var i=0; i < 5; i++) {
    result.push(function () { return i });  // (1)
}
console.log(result[1]()); // 5 (not 1)
console.log(result[3]()); // 5 (not 3)

The value returned in line (1) is always the current value of i, not the value it had when the function was created. After the loop is finished, i has the value 5, which is why all functions in the array return that value. If you want the function in line (1) to receive a snapshot of the current value of i, you can use an IIFE:

for (var i=0; i < 5; i++) {
    (function () {
        var i2 = i; // copy current i
        result.push(function () { return i2 });
    }());
}

Dlaczego 1 fragment zwraca 5?? Rozumiem, że w pewnym momencie i = 5, więc pętla zwraca false i nie idzie dalej, ale czemu funkcja zwraca tą właśnie 5 i to za każdym razem? Co niby zmienią tutaj funkcja samowywołująca w drugim fragmencie? Niby jest wyjaśnienie, ale dalej nie czuję tego. Nie mam tego "ahaaa, o to chodzi!". Siedze, patrzę w to.. No i nie mogę sobie jakoś wyjaśnić. Może coś źle tłumaczę na nasz język. Ktoś coś? z góry dzięki. Pozdrawiam.

Answer 1

var tworzy zmienne o zasięgu funkcyjnym, zatem zamknięcie tej zmiennej w bloku, w jakim jest pętla, nic nie zmienia. Zmienna i po pętli jest tę samą, na której operowaliśmy w pętli – a zatem tą zmienną, która "przeżyła" 5 iteracji, ostatecznie przyjmując wartość 5.

Z tego wynika sens drugiego kodu: skoro zmienne deklarowane przez var mają zasięg funkcyjny, trzeba… zamknąć je wewnątrz funkcji ;) Tym samym nie mają się jak wydostać.

Comments

ok, dziękuję za wyjaśnienie :) Myślę, że teraz "mam to". Swoją drogą fragmenty z książki:

Speaking JavaScript, An In-Depth Guide for Programmers - O' Reilly, mam nadzieję, że wciąż uważasz to za dobre źródło wiedzy, rekomendowałeś komuś na forum z rok temu :P

pozdrawiam.

Answer 2

The value returned in line (1) is always the current value of i, not the value it had when the function was created. After the loop is finished, i has the value 5, which is why all functions in the array return that value.

Gdy wywołujesz funkcję poza pętlą, to closure umożliwia Ci dostęp do zmiennej i (bo pamięta środowisko, w którym została utworzona zmienna), ale jej wartość jako ostatnia została ustawiona na 5 - bo na tym pętla się zakończyła.

IIFE powoduje, że funkcja wywołuje się w momencie jej tworzenia. W drugim przykładzie masz 

var i2 = i; // copy current i

Co powoduje, że wartość iteratora jest kopiowana (bo wartości prymitywne w JS, w przeciwieństwie do obiektów, są kopiowane) do tymczasowej zmiennej w momencie, gdy ma ona konkretną wartość- a dzięki IIFE, można potem ją wywołać z jej ówczesną wartością (taką, jaką wtedy miało i).

Tu masz więcej przykładów z IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Comments

Ok, dziękuję za dopełnienie wypowiedzi Comandeera :) Wydaje się, że kumam już zasadę działania. Zabieram się za artykuł z linku :) Pozdrawiam