Comment fonctionne cette syntaxe JavaScript / jQuery: (function (window, undefined) {}) (window)?

Avez-vous déjà jeté un œil sous le capot sur le code source de jQuery 1.4 et remarqué comment il est encapsulé de la manière suivante:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

J'ai lu un article sur l' espacement de noms JavaScript et un autre intitulé " Une paire importante de parenthèses ", donc j'en sais un peu sur ce qui se passe ici.

Mais je n'ai jamais vu cette syntaxe particulière auparavant. Qu'est-ce que ça undefinedfait là-bas? Et pourquoi windowfaut-il passer et ensuite réapparaître à la fin?

L'indéfini est une variable normale et peut être modifié simplement avec undefined = "new value";. Ainsi, jQuery crée une variable locale "non définie" qui est VRAIMENT indéfinie.

La variable window est rendue locale pour des raisons de performances. Parce que lorsque JavaScript recherche une variable, il passe d'abord par les variables locales jusqu'à ce qu'il trouve le nom de la variable. Lorsqu'il n'est pas trouvé, JavaScript passe par la portée suivante, etc. jusqu'à ce qu'il filtre les variables globales. Donc, si la variable window est rendue locale, JavaScript peut la rechercher plus rapidement. Plus d'informations: Accélérez votre JavaScript - Nicholas C. Zakas

Indéfini

En déclarant undefineden tant qu'argument mais en ne lui passant jamais de valeur, il est toujours indéfini, car il s'agit simplement d'une variable dans la portée globale qui peut être écrasée. Cela constitue a === undefinedune alternative sûre à typeof a == 'undefined', qui enregistre quelques caractères. Cela rend également le code plus convivial pour les minificateurs, car il undefinedpeut être raccourci, upar exemple, en enregistrant quelques caractères supplémentaires.

La fenêtre

Passer windowen argument garde une copie dans la portée locale, ce qui affecte les performances: http://jsperf.com/short-scope . Tous les accès à windowdevront désormais parcourir un niveau de moins dans la chaîne de portée. Comme avec undefined, une copie locale permet à nouveau une minification plus agressive.

Sidenote:

Bien que cela n'ait peut-être pas été l'intention des développeurs jQuery, le passage windowpermet à la bibliothèque d'être plus facilement intégrée dans les environnements Javascript côté serveur, par exemple node.js - où il n'y a pas d' windowobjet global . Dans une telle situation, une seule ligne doit être modifiée pour remplacer l' windowobjet par une autre. Dans le cas de jQuery, un windowobjet fictif peut être créé et transmis à des fins de scraping HTML (une bibliothèque telle que jsdom peut le faire).

D'autres ont expliqué undefined. undefinedest comme une variable globale qui peut être redéfinie à n'importe quelle valeur. Cette technique permet d'éviter que tous les contrôles non définis ne se rompent si quelqu'un écrit par exemple, undefined = 10quelque part. Un argument qui n'est jamais passé est garanti réel undefinedquelle que soit la valeur de la variable undefined .

La raison de passer la fenêtre peut être illustrée par l'exemple suivant.

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

Que consigne la console? La valeur de l' windowobjet, non? Faux! dix? Faux! Il enregistre undefined. L'interpréteur Javascript (ou compilateur JIT) le réécrit de cette façon -

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

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

})();

Cependant, si vous obtenez la windowvariable comme argument, il n'y a pas de var et donc pas de surprises.

Je ne sais pas si jQuery le fait, mais si vous redéfinissez windowune variable locale n'importe où dans votre fonction pour une raison quelconque, c'est une bonne idée de l'emprunter à une portée globale.

windowest passé comme ça juste au cas où quelqu'un déciderait de redéfinir l'objet window dans IE, je suppose la même chose pour undefined, au cas où il serait réaffecté d'une manière ou d'une autre plus tard.

Le début windowde ce script est juste le nom de l'argument "window", un argument qui est plus local que la windowréférence globale et ce que le code à l'intérieur de cette fermeture utilisera. Le windowà la fin spécifie en fait ce qu'il faut passer pour le premier argument, dans ce cas, le sens actuel de window... l'espoir est que vous n'avez pas foiré windowavant que cela n'arrive.

Cela peut être plus facile à penser en montrant le cas le plus typique utilisé dans jQuery, la .noConflict()gestion des plugins , donc pour la majorité du code, vous pouvez toujours utiliser $, même si cela signifie autre chose qu'en jQuerydehors de cette portée:

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

Testé avec 1000000 itérations. Ce type de localisation n'a eu aucun effet sur les performances. Pas même une seule milliseconde en 1000000 itérations. C'est tout simplement inutile.