Wie funktioniert diese JavaScript / jQuery-Syntax: (Funktion (Fenster, undefiniert) {}) (Fenster)?

Haben Sie sich jemals den jQuery 1.4- Quellcode unter der Haube angesehen und festgestellt, wie er folgendermaßen gekapselt ist:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Ich habe einen Artikel über JavaScript-Namespacing und einen anderen mit dem Titel " Ein wichtiges Paar von Parens " gelesen , damit ich weiß, was hier vor sich geht.

Aber ich habe diese spezielle Syntax noch nie gesehen. Was undefinedmacht das da? Und warum muss windowbestanden werden und dann am Ende wieder erscheinen?

Die undefinierte Variable ist eine normale Variable und kann einfach mit geändert werden undefined = "new value";. JQuery erstellt also eine lokale "undefinierte" Variable, die WIRKLICH undefiniert ist.

Die Fenstervariable wird aus Leistungsgründen lokalisiert. Denn wenn JavaScript eine Variable nachschlägt, durchläuft es zuerst die lokalen Variablen, bis es den Variablennamen findet. Wenn es nicht gefunden wird, durchläuft JavaScript den nächsten Bereich usw., bis es die globalen Variablen filtert. Wenn die Fenstervariable lokalisiert wird, kann JavaScript sie schneller nachschlagen. Weitere Informationen: Beschleunigen Sie Ihr JavaScript - Nicholas C. Zakas

Nicht definiert

Indem Sie undefinedals Argument deklarieren, aber niemals einen Wert an ihn übergeben, stellen Sie sicher, dass er immer undefiniert ist, da es sich lediglich um eine Variable im globalen Bereich handelt, die überschrieben werden kann. Dies ist a === undefinedeine sichere Alternative zu typeof a == 'undefined', die einige Zeichen spart. Dadurch wird der Code auch minifierfreundlicher, da beispielsweise ein paar weitere Zeichen eingespart werden undefinedkönnen u.

Fenster

Beim Übergeben windowals Argument bleibt eine Kopie im lokalen Bereich, was sich auf die Leistung auswirkt: http://jsperf.com/short-scope . Alle Zugriffe auf windowmüssen nun eine Ebene weniger in der Bereichskette verlaufen. Wie bei ermöglicht undefinedeine lokale Kopie wiederum eine aggressivere Minimierung.

Randnotiz:

Obwohl dies möglicherweise nicht die Absicht der jQuery-Entwickler war, windowermöglicht die Übergabe die einfachere Integration der Bibliothek in serverseitige Javascript-Umgebungen, z. B. node.js, in denen kein globales windowObjekt vorhanden ist. In einer solchen Situation muss nur eine Zeile geändert werden, um das windowObjekt durch eine andere zu ersetzen . Im Fall von jQuery kann ein Scheinobjektwindow zum Zwecke des HTML-Scrapings erstellt und übergeben werden (eine Bibliothek wie jsdom kann dies tun).

Andere haben erklärt undefined. undefinedist wie eine globale Variable, die auf einen beliebigen Wert neu definiert werden kann. Diese Technik soll verhindern, dass alle undefinierten Prüfungen unterbrochen werden, wenn jemand undefined = 10irgendwo etwas geschrieben hat. Ein Argument, das niemals übergeben wird, ist garantiert real, undefinedunabhängig vom Wert der Variablen undefined .

Der Grund für das Übergeben des Fensters kann anhand des folgenden Beispiels veranschaulicht werden.

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

Was protokolliert die Konsole? Der Wert des windowObjekts richtig? Falsch! 10? Falsch! Es protokolliert undefined. Der Javascript-Interpreter (oder JIT-Compiler) schreibt es auf diese Weise neu -

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

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

})();

Wenn Sie jedoch die windowVariable als Argument erhalten, gibt es keine var und daher keine Überraschungen.

Ich weiß nicht, ob jQuery dies tut, aber wenn Sie die windowlokale Variable irgendwo in Ihrer Funktion aus irgendeinem Grund neu definieren, ist es eine gute Idee, sie aus dem globalen Bereich auszuleihen.

windowwird so übergeben, nur für den Fall, dass sich jemand entscheidet, das Fensterobjekt im IE neu zu definieren, nehme ich dasselbe für den undefinedFall an, dass es später auf irgendeine Weise neu zugewiesen wird.

Oben windowin diesem Skript wird nur das Argument "Fenster" genannt, ein Argument, das lokaler ist als die globale windowReferenz und das, was der Code in diesem Abschluss verwendet. Am windowEnde wird tatsächlich angegeben, was für das erste Argument verwendet werden soll, in diesem Fall die aktuelle Bedeutung von window... die Hoffnung ist, dass Sie es nicht vermasselt haben, windowbevor dies geschieht.

Dies ist möglicherweise einfacher zu verstehen, wenn der typischste Fall .noConflict()für die Behandlung von jQuery-Plugins angezeigt wird. Für den Großteil des Codes können Sie ihn also weiterhin verwenden $, auch wenn er etwas anderes als jQueryaußerhalb dieses Bereichs bedeutet:

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

Getestet mit 1000000 Iterationen. Diese Art der Lokalisierung hatte keinen Einfluss auf die Leistung. Nicht einmal eine Millisekunde in 1000000 Iterationen. Das ist einfach nutzlos.