2012-04-05 12 views
8

Encuentro siguiendo líneas de código, pero no lo pude entender.Confundido acerca de este patrón de JavaScript

¿Qué es esto (/ ... /) (esto); propósito en javascript? ¿Tiene nombre para este patrón?

Código de la siguiente manera

:

//Move.js 
(function(exports){ 
    exports.Move = function(){ 

    }; 
})(this); 
+0

esto en Javascript no significa que la clase o el objeto pero el contexto. Cualquier función de javascript se puede llamar de todos modos, y puede cambiar el valor de esto dinámicamente. en ese ejemplo, simplemente está creando una función, llamándola de inmediato y asignándole el valor de esto al argumento de exportación. así que en una rueda de nueces está la definición de función y luego la función llama con esto como un parámetro. – mpm

+0

@ camus: esa es una explicación muy confusa. El valor * this * de una función no es realmente dinámico, se establece por la forma en que se llama a la función y no se puede cambiar después. – RobG

+0

si me lees bien, hablé sobre el contexto de la función que es dinámica.esto es dinámico, ya que no está configurado en un valor, sino que depende de cómo se llame a la función. La explicación es bastante clara. esto no se refiere a un contexto, por lo tanto, es dinámico. – mpm

Respuesta

5

este patrón es un "Immediately Invoked Function Expresssion". en resumen, es solo una función que se ejecuta de inmediato. la this en el extremo es un parámetro para ser enviado a la función interna que se accede como exports

(function(exports){ 

    //that was "this" outside, is now "exports" in here 

}(this)); 

en su ejemplo, podemos suponer que todo lo que this era, es un objeto que se ha añadido un método Move lo.

algunos también llaman a este patrón el "Module Pattern" en un sentido que crea un "entorno contenido" para que el material que contiene no sea visible debido a un nuevo alcance de función. en otras palabras, lo que está dentro ve el exterior, pero el exterior solo puede ver lo que el interior deja ver

+0

No es un ejemplo del patrón de módulo, es solo una expresión de función invocada inmediatamente (IIFE), que se utiliza con el patrón de módulo para devolver un objeto con propiedades, métodos y acceso a miembros "privados" a través de cierres. – RobG

+0

* No he dicho * que mi código aquí arriba es un ejemplo del patrón del módulo. mi código aquí arriba solo muestra 'this' convirtiéndose en' exports' dentro de la función. No incluí un ejemplo de patrón de módulo ya que cada uno tiene su propio estilo de construcción. – Joseph

+0

hmm ... cuando lo pienso. ¿Cuál es la diferencia con el código anterior con var exports = function() {// bla}. – TonyTakeshi

3

Ese patrón simplemente hace exports asignados a this en el momento de la ejecución.

Suponiendo el alcance global y un navegador, this apuntará al objeto window.

Teniendo en cuenta estas suposiciones, window.Move debe contener la función asignada dentro de esa IIFE (Expresión de función invocada inmediatamente).

Si esta función se llama en un contexto diferente, donde this es nowindow, asignará a ese método lo this estaba en el medio ambiente exterior.

+0

Probablemente sea mejor decir que en el código global, * this * siempre hace referencia al objeto global. En algunos entornos (por ejemplo, navegadores) también hay un objeto * window * que es esencialmente el mismo objeto (pero puede no serlo), por lo que * this * en un contexto global también hace referencia a * window *. – RobG

1

Este patrón se denomina "Patrón de módulo". Hay varios sub patrones y este usó el patrón del Módulo Aumentado.

Primero, importamos el módulo, luego agregamos propiedades, luego exportamos . He aquí un ejemplo, aumentando nuestro módulo desde arriba:

Para más lectura sobre este patrón Módulo echa un vistazo a http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Para más lectura sobre los patrones generales de Javascript echa un vistazo a http://addyosmani.com/resources/essentialjsdesignpatterns/book/

+0

http://addyosmani.com/resources/essentialjsdesignpatterns/book/ es un MUY bueno, detallado y con numerosos ejemplos, absolutamente imprescindible. – sMyles

Cuestiones relacionadas