Come funziona questa sintassi JavaScript / jQuery: (funzione (finestra, non definita) {}) (finestra)?

Hai mai dato un'occhiata al codice sorgente di jQuery 1.4 e hai notato come è incapsulato nel modo seguente:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

Ho letto un articolo su JavaScript Namespacing e un altro intitolato " An Important Pair of Parens ", quindi ne so qualcosa di quello che sta succedendo qui.

Ma non ho mai visto questa sintassi particolare prima. Cosa undefinedci fa lì? E perché windowdeve essere passato e poi apparire di nuovo alla fine?

Il non definito è una variabile normale e può essere modificato semplicemente con undefined = "new value";. Quindi jQuery crea una variabile locale "non definita" che è VERAMENTE indefinita.

La variabile finestra viene resa locale per motivi di prestazioni. Perché quando JavaScript cerca una variabile, passa prima attraverso le variabili locali fino a quando non trova il nome della variabile. Quando non viene trovato, JavaScript passa attraverso l'ambito successivo ecc. Fino a quando non filtra attraverso le variabili globali. Quindi, se la variabile della finestra viene resa locale, JavaScript può cercarla più rapidamente. Ulteriori informazioni: Velocizza il tuo JavaScript - Nicholas C. Zakas

Non definito

Dichiarando undefinedcome argomento ma senza mai passare un valore ad esso, si assicura che sia sempre indefinito, in quanto è semplicemente una variabile nell'ambito globale che può essere sovrascritta. Questo rende a === undefinedun'alternativa sicura a typeof a == 'undefined', che salva alcuni personaggi. Inoltre, rende il codice più intuitivo, come undefinedpuò essere abbreviato, ad uesempio, salvando alcuni caratteri in più.

Finestra

Il passaggio windowcome argomento mantiene una copia nell'ambito locale, che influisce sulle prestazioni: http://jsperf.com/short-scope . Tutti gli accessi windowdovranno ora spostarsi di un livello in meno nella catena di portata. Come nel caso undefined, una copia locale consente nuovamente una minificazione più aggressiva.

Nota a margine:

Anche se questo potrebbe non essere stato l'intenzione degli sviluppatori jQuery, il passaggio windowconsente di integrare più facilmente la libreria in ambienti Javascript lato server, ad esempio node.js , dove non esiste alcun windowoggetto globale . In una situazione del genere, è necessario modificare solo una riga per sostituire l' windowoggetto con un'altra. Nel caso di jQuery, un windowoggetto simulato può essere creato e passato ai fini dello scraping HTML (una libreria come jsdom può farlo).

Altri hanno spiegato undefined. undefinedè come una variabile globale che può essere ridefinita su qualsiasi valore. Questa tecnica serve a prevenire la rottura di tutti i controlli indefiniti se qualcuno ha scritto undefined = 10da qualche parte. Un argomento che non viene mai passato è garantito essere reale undefinedindipendentemente dal valore della variabile undefined .

Il motivo per passare la finestra può essere illustrato con il seguente esempio.

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

Cosa registra la console? Il valore windowdell'oggetto giusto? Sbagliato! 10? Sbagliato! Registra undefined. L'interprete Javascript (o il compilatore JIT) lo riscrive in questo modo -

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

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

})();

Tuttavia, se ottieni la windowvariabile come argomento, non c'è var e quindi nessuna sorpresa.

Non so se jQuery lo stia facendo, ma se stai ridefinendo windowla variabile locale in qualsiasi punto della tua funzione per qualsiasi motivo, è una buona idea prenderla in prestito dall'ambito globale.

windowviene passato in questo modo nel caso in cui qualcuno decida di ridefinire l'oggetto finestra in IE, presumo lo stesso per undefined, nel caso in cui venga riassegnato in qualche modo in seguito.

La parte superiore windowdi quello script sta semplicemente nominando l'argomento "finestra", un argomento più locale del windowriferimento globale e che cosa utilizzerà il codice all'interno di questa chiusura. Alla windowfine si specifica in realtà cosa passare per il primo argomento, in questo caso l'attuale significato di window... la speranza è che non si sia rovinato windowprima che ciò accada.

Questo può essere più facile da pensare mostrando il caso più tipico usato in jQuery, la .noConflict()gestione dei plugin , quindi per la maggior parte del codice puoi ancora usare $, anche se significa qualcosa di diverso da jQueryquesto ambito:

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

Testato con 1000000 iterazioni. Questo tipo di localizzazione non ha avuto alcun effetto sulle prestazioni. Neanche un millisecondo in 1000000 iterazioni. Questo è semplicemente inutile.