Jak działa ta składnia JavaScript / jQuery: (function (window, undefined) {}) (window)?

Czy kiedykolwiek zajrzałeś pod maskę kodu źródłowego jQuery 1.4 i zauważyłeś, jak jest on hermetyzowany w następujący sposób:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Przeczytałem artykuł na temat przestrzeni nazw JavaScript i kolejny zatytułowany „ Ważna para parenów ”, więc wiem trochę o tym, co się tutaj dzieje.

Ale nigdy wcześniej nie widziałem tej konkretnej składni. Co to undefinedtam robi? I dlaczego windowtrzeba go przekazać, a potem znowu pojawić się na końcu?

Niezdefiniowana jest normalną zmienną i można ją po prostu zmienić za pomocą undefined = "new value";. Zatem jQuery tworzy lokalną zmienną „niezdefiniowaną”, która jest NAPRAWDĘ niezdefiniowana.

Ze względu na wydajność zmienna okna jest lokalna. Ponieważ kiedy JavaScript wyszukuje zmienną, najpierw przechodzi przez zmienne lokalne, aż znajdzie nazwę zmiennej. Jeśli nie zostanie znaleziony, JavaScript przechodzi przez następny zakres itp., Aż przefiltruje zmienne globalne. Więc jeśli zmienna okna jest lokalna, JavaScript może ją szybciej wyszukać. Dalsze informacje: Przyspiesz swój JavaScript - Nicholas C. Zakas

Nieokreślony

Deklarując undefinedjako argument, ale nigdy nie przekazując mu wartości, zapewnia, że ​​jest ona zawsze niezdefiniowana, ponieważ jest to po prostu zmienna w zakresie globalnym, którą można nadpisać. Jest a === undefinedto bezpieczna alternatywa dla typeof a == 'undefined', która oszczędza kilka znaków. Dzięki temu kod jest bardziej przyjazny minifier, co undefinedmożna skrócić, una przykład, do zapisania kilku dodatkowych znaków.

Okno

Podanie windowjako argument powoduje zachowanie kopii w zakresie lokalnym, co wpływa na wydajność: http://jsperf.com/short-scope . Wszystkie dostępy windowbędą teraz musiały przejść o jeden poziom mniej w górę łańcucha lunety. Podobnie jak w undefinedprzypadku lokalnej kopii ponownie umożliwia bardziej agresywną minifikację.

Dygresja:

Chociaż może nie być to intencją twórców jQuery, przekazanie windowumożliwia łatwiejszą integrację biblioteki w środowiskach JavaScript po stronie serwera, na przykład node.js - gdzie nie ma windowobiektu globalnego . W takiej sytuacji wystarczy zmienić tylko jedną linię, aby zastąpić windowobiekt innym. W przypadku jQuery można stworzyć pozorowany windowobiekt i przekazać go w celu skrobania HTML ( może to zrobić biblioteka taka jak jsdom ).

Inni wyjaśnili undefined. undefinedjest jak zmienna globalna, którą można przedefiniować na dowolną wartość. Ta technika ma na celu zapobieżenie zerwaniu wszystkich niezdefiniowanych sprawdzeń, jeśli ktoś undefined = 10gdzieś napisał . Argument, który nigdy nie zostanie przekazany, ma gwarancję, że jest prawdziwy, undefinedniezależnie od wartości zmiennej undefined .

Powód przejścia przez okno można zilustrować na następującym przykładzie.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

Co rejestruje konsola? Wartość windowprzedmiotu, prawda? Źle! 10? Źle! To rejestruje undefined. Interpreter JavaScript (lub kompilator JIT) przepisuje to w ten sposób -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

Jeśli jednak otrzymasz windowzmienną jako argument, nie ma zmiennej, a zatem nie ma niespodzianek.

Nie wiem, czy jQuery to robi, ale jeśli redefiniujesz windowzmienną lokalną w dowolnym miejscu funkcji z jakiegokolwiek powodu, dobrym pomysłem jest pożyczenie jej z zakresu globalnego.

windowjest przekazywany w ten sposób na wypadek, gdyby ktoś zdecydował się na przedefiniowanie obiektu okna w IE, zakładam to samo undefined, na wypadek, gdyby później został ponownie przypisany.

Wierzchołek windowtego skryptu to po prostu nazwanie argumentu „okno”, argument, który jest bardziej lokalny niż windowodniesienie globalne i to, czego użyje kod wewnątrz tego zamknięcia. Na windowkońcu tak naprawdę określa się, co przekazać dla pierwszego argumentu, w tym przypadku obecne znaczenie window... mam nadzieję, że nie schrzaniłeś, windowzanim to się stanie.

Łatwiej o tym pomyśleć, pokazując najbardziej typowy przypadek używany w jQuery, .noConflict()obsługę wtyczek , więc dla większości kodu możesz nadal używać $, nawet jeśli oznacza to coś innego niż jQuerypoza tym zakresem:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Przetestowano na 1000000 iteracji. Taka lokalizacja nie miała wpływu na wydajność. Ani jednej milisekundy w 1000000 iteracjach. To jest po prostu bezużyteczne.