tipos - ¿Cómo funciona esta sintaxis JavaScript/JQuery:(función(ventana, indefinido){})(ventana)?

tipos de funciones en javascript

Question

¿Alguna vez echó un vistazo debajo del capó en el código fuente de JQuery 1.4 y notó 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 Parens ", así que sé algo de lo que está pasando aquí.

Pero nunca antes había visto esta sintaxis en particular. ¿Qué está haciendo eso undefined allí? ¿Y por qué es necesario pasar la window y luego aparecer al final otra vez?

Answer 1

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 hace local por razones de rendimiento. Porque cuando JavaScript busca una variable, primero pasa por 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 la ventana se hace local, JavaScript puede buscarla más rápido. Más información: Acelere su JavaScript - Nicholas C. Zakas

Answer 2

Otros han explicado undefined . undefined es como una variable global que se puede redefinir a cualquier valor. Esta técnica es para evitar que todos los controles indefinidos se rompan si alguien escribe say, undefined = 10 alguna parte. Se garantiza que un argumento que nunca se pasa es undefined independientemente 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 objeto window ¿verdad? ¡Incorrecto! 10? ¡Incorrecto! Registra lo 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 obtienes la variable window como argumento, no hay var y, por lo tanto, no hay sorpresas.

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

Answer 3

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

Answer 4

window se pasa de esa manera, solo en caso de que alguien decida redefinir el objeto de la ventana en IE, supongo que lo mismo para undefined , en caso de que se reasigne de alguna manera más tarde.

La window superior en esa secuencia de comandos es simplemente nombrar el argumento "ventana", un argumento que es más local que la window global de referencia y lo que usará el código dentro de este cierre. La window al final en realidad está especificando qué pasar para el primer argumento, en este caso el significado actual de la window ... la esperanza es que no hayas arruinado la window antes de que eso ocurra.

Esto puede ser más fácil de pensar al mostrar el caso más típico utilizado en el manejo de jQuery, plugin .noConflict() , por lo que para la mayoría del código aún puede usar $ , incluso si significa algo diferente a jQuery fuera de este ámbito:

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

Answer 5

Indefinido

Al declarar undefined como argumento pero sin pasarle nunca un valor, se asegura que siempre esté indefinido, ya que es simplemente una variable en el ámbito global que puede sobrescribirse. Esto hace que a === undefined una alternativa segura al typeof a == ''undefined'' , lo que ahorra algunos caracteres. También hace que el código sea más amigable con los miniaturas, ya que undefined se puede acortar a u por ejemplo, salvando algunos caracteres más.

Ventana

Pasar window como argumento mantiene una copia en el ámbito local, que afecta el rendimiento: http://jsperf.com/short-scope . Todos los accesos a la window ahora 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 no sea la intención de los desarrolladores de jQuery, la window paso permite que la biblioteca se integre más fácilmente en los entornos de JavaScript del lado del servidor, por ejemplo, node.js , donde no hay ningún objeto de window global. En tal situación, solo se necesita cambiar una línea para reemplazar el objeto window por otro. En el caso de jQuery, se puede crear un objeto de window simulado y pasarlo para raspar HTML (una biblioteca como jsdom puede hacer esto).