Init-Funktion in JavaScript und wie es funktioniert

Question

Oft sehe ich den folgenden Code:

(function() { 
    // init part 
})(); 

aber ich konnte nie meinen Kopf um, wie es funktioniert. Ich finde die letzten Klammern besonders verwirrend. Kann jemand erklären, wie es in Bezug auf Ausführungskontexte (EC) und variable Objekte (VO) funktioniert?

Answer 1

Dieses Muster erzeugt einen neuen Ausführungskontext (EC), in dem alle lokalen Variablenobjekte (VOs) leben werden, und wird ebenfalls absterben, wenn die EC beendet wird. Die einzige Ausnahme zu dieser Lebenszeit sind VOs, die Teil einer closure werden.

Bitte beachten Sie, dass JavaScript keine magische "init" -Funktion hat. Sie könnten dieses Muster mit solch einem Muster assoziieren, da die meisten JS-Bibliotheken (jQuery, YUI usw.), die sich selbst respektieren, dies tun, damit sie das globale NS nicht mehr als nötig verschmutzen.

Eine Demonstration:

var x = 1; // global VO 
(function(){   
    var x = 2; // local VO 
})(); 
x == 1; // global VO, unchanged by the local VO 

Der 2. Satz von „Klammern“ (das sind Pars tatsächlich aufgerufen, oder eine Reihe von Klammern), sind einfach die Funktionsausdruck direkt es vorhergehenden aufzurufen (wie durch die definierte vorheriger Klammersatz).

Answer 2

Der Code erstellt eine anonyme Funktion und führt sie dann sofort aus. Ähnlich wie:

var temp = function() { 
    // init part 
} 
temp(); 

Der Zweck dieser Konstruktion besteht darin, einen Bereich für den Code innerhalb der Funktion zu erstellen. Sie können Variablen und Funktionen innerhalb des Bereichs deklarieren, und diese sind für diesen Bereich lokal. Auf diese Weise wird der globale Geltungsbereich nicht durcheinander gebracht, wodurch das Risiko von Konflikten mit anderen Skripts minimiert wird.

Answer 3

Die Art, wie ich dies normalerweise den Leuten erklärt, ist zu zeigen, wie es mit anderen JavaScript-Mustern vergleichbar ist.

Zunächst sollten Sie wissen, dass es zwei Möglichkeiten, eine Funktion zu deklarieren (eigentlich gibt es mindestens fünf, aber diese sind die beiden Hauptschuldigen):

function foo() {/*code*/}

und

var foo = function() {/*code*/};

Auch wenn diese Konstruktion seltsam aussieht, verwenden Sie sie wahrscheinlich immer beim Anhängen von Ereignissen:

sollten Sie beachten, dass die zweite Form von einer regulären Variablendeklaration ist nicht viel anders:

var bar = 5; 
var baz = 'some string'; 
var foo = function() {/*code*/}; 

Aber in JavaScript, um Sie immer die Wahl haben einen Wert direkt oder über eine Variable zwischen der Verwendung. Wenn bar5 ist, dann werden die nächsten beiden Aussagen sind äquivalent:

var myVal = bar * 100; // use 'bar' 
var myVal = 5 * 100; // don't use 'bar' 

Nun, wenn Sie 5 auf eigene verwenden können, warum können Sie function() {\*code*\} nicht zu sehr auf seine eigene benutzen? In der Tat können Sie. Und das nennt man eine anonyme Funktion.Also diese zwei Beispiele sind gleichwertig:

Der einzige Unterschied, den Sie sehen sollten, ist in den zusätzlichen Klammern. Das liegt einfach daran, dass wenn Sie eine Zeile mit dem Schlüsselwort function starten, der Parser denkt, dass Sie eine Funktion deklarieren, indem Sie das erste Muster am Anfang dieser Antwort verwenden, und eine Syntaxfehlerausnahme auslösen. Umhüllen Sie also Ihre gesamte anonyme Funktion in zwei geschweifte Klammern und das Problem verschwindet.

Mit anderen Worten sind die folgenden drei Aussagen gültig:

5;      // pointless and stupid 
'some string';   // pointless and stupid 
(function(){/*code*/}()); // wonderfully powerful 

Answer 4

Ich kann niemand nicht glauben, dass die ops Frage beantwortet hat!

Die letzten Klammern werden verwendet, um die Parameter an die anonyme Funktion zu übergeben. So erzeugt das folgende Beispiel eine Funktion, läuft es dann mit den x = 5 und y = 8

(function(x,y){ 
    //code here 
})(5,8) 

Dies kann nicht so nützlich erscheinen, aber es hat seinen Platz. Die häufigste ich gesehen habe, ist

(function($){ 
    //code here 
})(jQuery) 

die für jQuery im kompatibelen Modus sein kann, aber Sie können in der anonymen Funktion, um es als „$“ beziehen.

Answer 5

Selbst rufenden anonyme Funktion (SIAF)

Selbst Aufrufe Funktionen laufen sofort, auch wenn DOM nicht ganz fertig ist.

jQuery document.ready vs self calling anonymous function

Answer 6

In einfachen Wort kann man das verstehen, wenn Laden der Seite, die von diesem zweiten Paar Klammern() Funktion aufgerufen rufen müssen nicht haben wird default.We die function.It als anonyme Funktion bekannt.

d.h.

(function(a,b){ 
//Do your code here 
})(1,2); 

Es gleichen wie als

var test = function(x,y) { 
    // Do your code here 
} 
test(1,2); 

Answer 7

Seine immediatly genannt Aufruf Funktionsausdruck (IIFE). Hauptsächlich mit dem JavaScript-Schließungskonzept verbunden. Die Hauptfunktion besteht darin, die Funktion vor der Änderung der globalen Variablen auszuführen, damit das erwartete Verhalten des Codes beibehalten werden kann.