Błąd JSlint ' nie tworzy funkcji w pętli."prowadzi do pytania o sam Javascript

Częściowo zależy to od tego, czy używasz wyrażenia funkcji czy deklaracji funkcji . Są to różne rzeczy, dzieją się w różnym czasie i mają inny wpływ na otaczający zakres. Zacznijmy więc od rozróżnienia.

A function expression jest produkcją function, w której używasz wyniku jako wartości prawej ręki - np. przypisujesz wynik do zmiennej lub Właściwości lub przekazujesz go do funkcji jako parametr itp. Są to wszystkie wyrażenia funkcji :

setTimeout(function() { ... }, 1000);

var f = function() {  ... };

var named = function bar() { ... };

(nie używaj tego ostatniego-który nazywa się nazwanym wyrażeniem funkcji - implementacje mają błędy, szczególnie IE.)

Natomiast jest to deklaracja funkcji :

function bar() { ... }

Jest samodzielna, nie używasz wyniku jako wartości prawej ręki.

Dwie główne różnice między nimi:

1. Wyrażenia funkcyjne są oceniane, gdzie są spotykane w przepływie programu. Deklaracje są oceniane, gdy kontrola wchodzi w zakres zawierający (np. funkcja zawierająca lub zakres globalny).

2. Nazwa funkcji (jeśli taką posiada) jest zdefiniowana w deklaracji zawierającej zakres funkcji . Nie jest to funkcja wyrażenie (z wyjątkiem błędów przeglądarki).

Twoje anonimowe funkcje są wyrażeniami funkcyjnymi , a więc o ile interpreter nie zrobi optymalizacja (co jest bezpłatne), zostaną odtworzone na każdej pętli. Więc twoje użycie jest w porządku, jeśli uważasz, że implementacje zoptymalizują, ale podzielenie go na nazwaną funkcję ma inne korzyści i-co ważne-nic cię nie kosztuje. Zobacz także casablanca ' s answer , aby dowiedzieć się, dlaczego interpreter może nie być w stanie zoptymalizować odtwarzanie funkcji na każdej iteracji, w zależności od tego, jak głęboko sprawdza kod.

Większym problemem byłoby, gdyby użyłeś funkcji deklaracji W pętli, ciała warunkowego itp.:

function foo() {
    for (i = 0; i < limit; ++i) {
        function bar() { ... } // <== Don't do this
        bar();
    }
}

function foo() {
    for (i = 0; i < limit; ++i) {
        bar();
    }

    function bar() {
        /* ...do something, possibly using 'i'... */
    }
}

Interpreter może faktycznie utworzyć nowy obiekt funkcji z każdą iteracją, choćby dlatego, że funkcja ta może być zamknięciem, które musi przechwycić bieżącą wartość dowolnej zmiennej w jej zewnętrznym zakresie.

Dlatego JSLint chce cię odstraszyć od tworzenia wielu anonimowych funkcji w ciasnej pętli.

Boo to JSLint. To jak tępy instrument na głowie. Po każdym napotkaniu function tworzony jest nowy obiekt funkcji (jest to Instrukcja/wyrażenie, nie deklaracja -- edit: to jest białe kłamstwo. Zobacz odpowiedzi T. J. Crowdersa ). Zwykle odbywa się to w pętli do zamknięcia, itp. Większym problemem jest tworzenie fałszywych zamknięć .

Na przykład:

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    alert(i)
  }, 10)
}

Spowoduje "dziwne" zachowanie. To nie jest problem z " tworzeniem funkcji w pętli tak bardzo, jak nie zrozumienie zasad, których używa JS dla zakresów zmiennych i zamknięć (zmienne nie są związane w zamknięciach, zakresy -- konteksty wykonania -- są).

Możesz jednak chcieć utworzyć zamknięcie w funkcji. Rozważ ten mniej zaskakujący kod:

for (var i = 0; i < 10; i++) {
  setTimeout((function (_i) { 
    return function () {
      alert(_i)
    }
  })(i), 10)
}