¿Cómo funciona esta sintaxis de JavaScript / jQuery: (function (window, undefined) {}) (window)?

¿Alguna vez has echado un vistazo al código fuente de jQuery 1.4 y has notado cómo está encapsulado de la siguiente manera:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

He leído un artículo sobre el espacio de nombres de JavaScript y otro llamado " Un par importante de parejas ", así que sé algo sobre lo que está sucediendo aquí.

Pero nunca antes había visto esta sintaxis en particular. ¿Qué está undefinedhaciendo eso allí? ¿Y por qué es windownecesario aprobarlo y luego volver a aparecer al final?

Lo indefinido es una variable normal y se puede cambiar simplemente con undefined = "new value";. Entonces jQuery crea una variable local "indefinida" que REALMENTE no está definida.

La variable de ventana se convierte en local por razones de rendimiento. Porque cuando JavaScript busca una variable, primero revisa las variables locales hasta que encuentra el nombre de la variable. Cuando no se encuentra, JavaScript pasa por el siguiente alcance, etc. hasta que se filtra a través de las variables globales. Entonces, si la variable de ventana se convierte en local, JavaScript puede buscarla más rápido. Más información: Acelere su JavaScript - Nicholas C. Zakas

Indefinido

Al declararlo undefinedcomo argumento pero nunca pasarle un valor, se garantiza que siempre esté indefinido, ya que es simplemente una variable en el ámbito global que se puede sobrescribir. Esto hace a === undefineduna alternativa segura a typeof a == 'undefined', que ahorra algunos caracteres. También hace que el código sea más amigable con los minificadores, ya que undefinedse puede acortar, upor ejemplo, para guardar algunos caracteres más.

Ventana

Pasar windowcomo argumento mantiene una copia en el ámbito local, lo que afecta el rendimiento: http://jsperf.com/short-scope . Todos los accesos windowahora tendrán que viajar un nivel menos en la cadena de alcance. Al igual que con undefined, una copia local nuevamente permite una minificación más agresiva.

Nota al margen:

Aunque esta puede no haber sido la intención de los desarrolladores de jQuery, la transferencia windowpermite que la biblioteca se integre más fácilmente en entornos Javascript del lado del servidor, por ejemplo node.js , donde no hay un windowobjeto global . En tal situación, solo se necesita cambiar una línea para reemplazar el windowobjeto con otra. En el caso de jQuery, windowse puede crear y pasar un objeto simulado con el fin de raspar HTML (una biblioteca como jsdom puede hacer esto).

Otros lo han explicado undefined. undefinedes como una variable global que se puede redefinir a cualquier valor. Esta técnica es para evitar que se rompan todas las comprobaciones indefinidas si alguien escribió decir, en undefined = 10algún lugar. Se garantiza que un argumento que nunca se pasa será real, undefinedindependientemente del valor de la variable undefined .

La razón para pasar la ventana se puede ilustrar con el siguiente ejemplo.

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

¿Qué registra la consola? El valor del windowobjeto ¿verdad? ¡Incorrecto! 10? ¡Incorrecto! Se registra undefined. El intérprete de Javascript (o el compilador JIT) lo reescribe de esta manera:

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

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

})();

Sin embargo, si obtiene la windowvariable como argumento, no hay var y, por lo tanto, no hay sorpresas.

No sé si jQuery lo está haciendo, pero si está redefiniendo windowla variable local en cualquier lugar de su función por cualquier razón, es una buena idea tomarla prestada del alcance global.

windowse pasa así en caso de que alguien decida redefinir el objeto de ventana en IE, supongo lo mismo undefined, en caso de que se reasigne de alguna manera más tarde.

La parte superior windowde ese script es simplemente nombrar el argumento "ventana", un argumento que es más local que la windowreferencia global y que es lo que usará el código dentro de este cierre. Al windowfinal, en realidad se especifica qué pasar para el primer argumento, en este caso, el significado actual de window... la esperanza es que no se haya equivocado windowantes de que eso suceda.

Puede ser más fácil pensar en esto mostrando el caso más típico utilizado en jQuery, .noConflict()manejo de complementos , por lo que para la mayoría del código aún puede usar $, incluso si significa algo más que jQueryfuera de este alcance:

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

Probado con 1000000 iteraciones. Este tipo de localización no tuvo efecto en el rendimiento. Ni siquiera un milisegundo en 1000000 iteraciones. Esto es simplemente inútil.