W skrócie

Podsumowanie

Pomaga zmniejszyć szanse na:

• zderzenie z innymi aplikacjami / bibliotekami
• zanieczyszczający superior (global most likely) scope

To nie wykrywa kiedy dokument jest gotowy - nie jest to jakiś rodzaj document.onload ani window.onload

Jest powszechnie znany jako Immediately Invoked Function Expression (IIFE) lub Self Executing Anonymous Function.

Objaśnienie Kodu

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

W powyższym przykładzie każda zmienna zdefiniowana w funkcji (tj. zadeklarowana za pomocą var) będzie "prywatna" i dostępna tylko w ramach zakresu funkcji (jak to ujął Vivin Paliath). Innymi słowy, zmienne te nie są widoczne/osiągalne poza funkcją. Zobacz demo na żywo.

Javascript ma zakres funkcji. "Parametry i zmienne zdefiniowane w funkcji nie są widoczne poza funkcją i że zmienna zdefiniowany gdziekolwiek wewnątrz funkcji jest widoczny wszędzie wewnątrz funkcji."(z "Javascript: the Good Parts").

Więcej szczegółów

Kod Alternatywny

W końcu kod zamieszczony wcześniej może być również wykonany w następujący sposób:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          // I CALL "myMainFunction" FUNCTION HERE
someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Zobacz demo na żywo .

The Roots

Iteracja 1

Pewnego dnia ktoś prawdopodobnie pomyślał "musi być sposób, aby uniknąć nazywania 'myMainFunction' , ponieważ wszystko, czego chcemy, to jej wykonanie natychmiast."

• expression: coś oceniającego do wartości. tj. 3+11/x
• statement: linia(Y) kodu robi coś, ale nie, a nie ocenia do wartości. tj. if(){}

Podobnie, wyrażenia funkcyjne obliczają wartość. I jedna konsekwencja (zakładam?) jest to, że można je natychmiast wywołać:

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Zobacz też live demo .

Iteracja 2

Następnym krokiem jest myśl "dlaczego mamy var myMainFunction = jeśli nawet go nie używamy!?".

Odpowiedź jest prosta: spróbuj usunąć to, jak poniżej:

 function(){ console.log('mamamia!'); }();

Zobacz demo na żywo .

To nie zadziała, ponieważ "deklaracje funkcji nie są wywoływalne" .

Sztuczka polega na tym, że usuwając var myMainFunction = przekształciliśmy wyrażenie funkcji w deklarację funkcji. Zobacz linki w "Zasoby", aby uzyskać więcej informacji na ten temat.

Następne pytanie brzmi: "dlaczego nie mogę zachować tego jako wyrażenia funkcji z czymś innym niż var myMainFunction =?

Odpowiedź brzmi "możesz", i jest wiele sposobów, aby to zrobić: dodanie +, a !, a -, a może owinięcie w parę nawiasów (jak to teraz robi się przez konwencję), i więcej wierzę. Jako przykład:

 (function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.

Lub

 +function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console

Lub

 -function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console

• co robi wykrzyknik mark do przed funkcją?
• znak JavaScript plus przed nazwą funkcji

Więc po dodaniu odpowiedniej modyfikacji do tego, co kiedyś było naszym "kodem alternatywnym", wracamy do dokładnie tego samego kodu, co użyty w przykładzie "Code Explained" [43]}

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

Czytaj więcej o Expressions vs Statements:

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression
• Javascript: różnica między instrukcją a wyrażeniem?
• Wyrażenie Kontra Twierdzenie

Lunety Demistyfikacyjne

One thing one może się zastanawiać "co się stanie, gdy nie zdefiniujesz zmiennej "prawidłowo" wewnątrz funkcji - tzn. wykonasz proste zadanie zamiast tego?"

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         // reachable, hence works: see in the console
window.myOtherFunction();  // works in the browser, myOtherFunction is then in the global scope
myFunction();              // unreachable, will throw an error, see in the console

Zobacz demo na żywo .

Zasadniczo, jeśli zmiennej, która nie została zadeklarowana w bieżącym zakresie, przypisana jest wartość, to " wyszukanie łańcucha zakresu następuje, dopóki nie znajdzie zmiennej lub nie trafi w globalny zakres (w którym momencie go utworzy)".

Gdy w środowisku przeglądarki (vs środowisku serwera jak nodejs) zasięg globalny jest zdefiniowany przez obiekt window. Stąd możemy zrobić window.myOtherFunction().

Moja wskazówka "dobre praktyki" na ten temat jest zawsze używać var podczas definiowania czegokolwiek : czy jest to liczba, obiekt lub funkcja, nawet jeśli w globalnym zasięgu. Dzięki temu kod jest znacznie prostszy.

Uwaga:

• javascript does not have block scope (Update: Block scope local variables added in ES6.)
• javascript ma tylko function scope & global scope (window zakres w środowisku przeglądarki)

Czytaj więcej o Javascript Scopes:

• jaki jest cel słowa kluczowego var i kiedy go użyć (lub pominąć)?
• jaki jest zakres zmiennych w JavaScript?

Zasoby

• youtu.be/i_qE1iAmjFg?t=2m15s - Paul Irish presents the IIFE at min 2: 15, do watch to!
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
• Książka: Javascript, dobre części - Gorąco polecam
• youtu.be/i_qE1iAmjFg?t=4m36s - Paul Irish presents the module pattern at 4: 36

Następne Kroki

Po pojawieniu się tej koncepcji IIFE, prowadzi ona do module pattern, co zwykle odbywa się poprzez wykorzystanie tego wzorca życia. Miłej zabawy:)

Javascript w przeglądarce ma tylko kilka efektywnych zakresów: zakres funkcji i zakres globalny.

Jeśli zmienna nie znajduje się w zakresie funkcji, jest w zakresie globalnym. Zmienne globalne są ogólnie złe, więc jest to konstrukcja, która pozwala zachować zmienne biblioteki dla siebie.

To się nazywa zamknięcie. Zasadniczo zamyka kod wewnątrz funkcji, aby inne biblioteki nie ingerowały w nią. Jest to podobne do tworzenia przestrzeni nazw w skompilowanych językach.

Przykład. Załóżmy, że napiszę:

(function() {

    var x = 2;

    // do stuff with x

})();

Teraz inne biblioteki nie mogą uzyskać dostępu do zmiennej x, którą stworzyłem do użycia w mojej bibliotece.

Można używać funkcji zamknięcia jako Dane w większych wyrażeniach, jak również w tej metodzie określania obsługi przeglądarek dla niektórych obiektów html5.

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

Oprócz utrzymywania zmiennych lokalnych, bardzo przydatnym zastosowaniem jest zapisywanie biblioteki przy użyciu zmiennej globalnej, można nadać jej krótszą nazwę zmiennej do użycia w bibliotece. Jest często używany do pisania wtyczek jQuery, ponieważ jQuery pozwala wyłączyć zmienną $ wskazującą na jQuery, używając jQuery.noConflict (). W przypadku, gdy jest wyłączony, Twój kod nadal może używać $ i nie łamać, jeśli po prostu to zrobisz:

(function($) { ...code...})(jQuery);

1. aby uniknąć kolizji z innymi metodami/bibliotekami w tym samym oknie,
2. unikaj zasięgu globalnego, zrób z niego zasięg lokalny,
3. Aby przyspieszyć debugowanie (local scope),
4. JavaScript ma tylko zakres funkcji, więc pomoże również w kompilacji kodów.

Powinniśmy również użyć 'use strict' w funkcji scope, aby upewnić się, że kod powinien być wykonywany w "trybie ścisłym". Przykładowy kod pokazany poniżej

(function() {
    'use strict';

    //Your code from here
})();