Los últimos tutoriales de desarrollo web
 

JavaScript Closures


Las variables JavaScript pueden pertenecer al ámbito local o global.

Las variables privadas se pueden hacer posible con cierres.


Variables globales

Una función puede tener acceso a todas las variables definidas dentro de la función, como este:

Ejemplo

function myFunction() {
    var a = 4;
    return a * a;
}
Inténtalo tú mismo "

Sin embargo, una función también se puede acceder a las variables definidas fuera de la función, como este:

Ejemplo

var a = 4;
function myFunction() {
    return a * a;
}
Inténtalo tú mismo "

En el último ejemplo, a es una variable global.

En una página web, variables globales pertenecen al objeto de ventana.

Las variables globales se pueden usar (y cambiar) por todas las secuencias de comandos en la página (y en la ventana).

En el primer ejemplo, a es una variable local.

Una variable local sólo se puede utilizar dentro de la función donde se define. Se oculta a otras funciones y otros códigos de secuencias de comandos.

Las variables globales y locales con el mismo nombre son variables diferentes. La modificación de uno, no modifica la otra.

Las variables creadas sin la palabra clave var, siempre son globales, aunque se crean dentro de una función.


Vida variable

Las variables globales viven tanto como su aplicación (la ventana de su / su página web) vive.

Las variables locales tienen una vida corta. Se crean cuando se invoca la función, y se borran cuando se termina la función.


Un dilema Contador

Supongamos que desea utilizar una variable para contar algo, y desea que este contador esté disponible para todas las funciones.

Se podría utilizar una variable global, y una función para aumentar el contador:

Ejemplo

var counter = 0;

function add() {
    counter += 1;
}

add();
add();
add();

// the counter is now equal to 3
Inténtalo tú mismo "

El contador sólo debe ser cambiado por el add() función.

El problema es, que cualquier script de la página se puede cambiar el contador, sin llamar a add() .

Si declaro el contador dentro de la función, nadie será capaz de cambiarlo sin llamar a añadir ():

Ejemplo

function add() {
    var counter = 0;
    counter += 1;
}

add();
add();
add();

// the counter should now be 3, but it does not work !
Inténtalo tú mismo "

¡No funcionó! Cada vez que llamo el add() función, el contador se pone a 1.

Una función JavaScript interno puede resolver esto.


Funciones JavaScript anidadas

Todas las funciones tienen acceso al ámbito global.

De hecho, en JavaScript, todas las funciones tienen acceso al ámbito "por encima" de ellos.

JavaScript soporta funciones anidadas. Funciones anidadas tienen acceso al ámbito "por encima" de ellos.

En este ejemplo, la función interna plus() tiene acceso a la variable de contador en la función de los padres:

Ejemplo

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
}
Inténtalo tú mismo "

Esto podría haber resuelto el dilema de venta libre, si pudiéramos llegar a la plus() la función desde el exterior.

También tenemos que encontrar una manera de ejecutar contador = 0 sólo una vez.

Necesitamos un cierre.


Los cierres de JavaScript

Recuerde que las funciones de auto-invocar? ¿Qué hace esta función?

Ejemplo

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// the counter is now 3
Inténtalo tú mismo "

ejemplo Explicación

El complemento variable se le asigna el valor devuelto por una función de auto-invocación.

La función de auto-invocando sólo se ejecuta una vez. Se establece el contador a cero (0), y devuelve una expresión de función.

De esta manera se convierte en un complemento función. La parte "maravilloso" es que se puede acceder al contador en el ámbito padre.

Esto se conoce como un cierre de JavaScript. Esto hace que sea posible para una función de las variables tienen "privadas".

El contador está protegido por el alcance de la función anónima, y ​​sólo se puede cambiar mediante la función add.

El cierre es una función que tiene acceso al alcance de los padres, incluso después de la función madre ha cerrado.