2010-08-29 18 views
40

Hace mucho tiempo, vi a alguien encapsular la totalidad de su bloque de JavaScript con el código de algo así como el código de abajo:encapsulación en JavaScript

(function() { 
    // ... 
})(this); 

Preguntas:

  1. es el código correcto?
  2. ¿Qué beneficio tiene encapsular todo el bloque de JavaScript como se indica arriba?
+1

Creo que 'encapsular' es un término engañoso aquí y debe cambiarse a 'alcance' con respecto a los conceptos de OOP –

Respuesta

75

Sí, eso es correcto. Se llama una expresión de función anónima autoinvocatoria.

Las variables de JavaScript tienen alcance de función o ámbito global. No hay alcance de bloque Al incluir su código en una función de invocación automática como la de su ejemplo, se crea un ámbito local temporal para el código de un solo uso, ejecutado inmediatamente, sin contaminar el espacio de nombres global.

considerar lo siguiente:

<html> 
<body> 
... 
<script> 
    (function() { 
     var x = ''; 

     function myFunction() { 
     alert('Hello: ' + x); 
     } 

     x = 'Bob'; 
     myFunction(); 

     alert(typeof x);   // string 
     alert(typeof myFunction); // function 
    })(); 

    alert(typeof x);    // undefined 
    alert(typeof myFunction);  // undefined 
</script> 
<script src="other-javascript.js"></script> 
</body> 
</html> 

Lo que se declara en la que la función de auto invocación se mantiene en un ámbito separado. No se puede acceder a la variable x ni a la función myFunction() desde ningún otro lado. El código en other-javascript.js no los verá, por ejemplo, y sería libre declarar otra función myFunction() sin conflictos.

+1

¿El alcance de "bloque" es como una variable privada? – nickb

+0

@ user434493: A diferencia de C, C++, Java y otros lenguajes, la variable 'y' en' if (x> 5) {var y = 0; } 'se puede acceder desde fuera del bloque' if' ...Eso hubiera sido un alcance de bloque, pero las variables de JavaScript se almacenan en un entorno de función y no se ven afectadas por otros bloques '{}'. Permítanme actualizar mi respuesta con un ejemplo ... –

+3

¿Cómo establecería una variable desde fuera de la encapsulación a un objeto desde dentro de la encapsulación? – user3015682

32

también, además de la respuesta de la @ de Daniel, pasando this a la función es un patrón común tener una referencia al objeto global, por ejemplo:

(function(window){ 

})(this); 

En el navegador de secuencias de comandos del objeto global tiene una propiedad denominada window que se refiere al objeto global en sí, en otros entornos no existe la propiedad window.

También, otra cosa que se puede hacer es especificar un argumento llamado undefined, porque la propiedad undefined no se describe en la tercera ECMAScript. Edición estándar (no hay ninguna garantía de que exista o no), y en algunas implementaciones la propiedad es mutable, por ejemplo:

(function(window, undefined){ 

})(this); 

En el ejemplo anterior, tenemos dos identificadores locales (que son un poco más rápido para resolver), window y undefined, solamente se hace pasar la primera (this, que siempre se refiere al objeto global en código Global (código que está fuera de cualquier función)), y el segundo, contendrá el valor primitivo undefined , porque no le estamos dando ningún valor.

Ese patrón es utilizado por algunas bibliotecas como jQuery.

Cuestiones relacionadas