Closures de JavaScript

Las variables JavaScript pertenecen alocaloglobalámbito.

las variables globales pueden acceder aClosureimplementan locales (privadas).

variables globales

la función puede acceder a las variablesfuncióndefinidas internamente, como:

Ejemplo

function myFunction() {
    var a = 4;
    return a * a;
}

Prueba por tu cuenta

pero la función también puede acceder a las variablesexternoVariables definidas, como:

Ejemplo

var a = 4;
function myFunction() {
    return a * a;
}

Prueba por tu cuenta

En el último ejemplo,a esglobalVariable.

En la página web, las variables globales pertenecen al objeto window.

Las variables globales pueden ser usadas y modificadas por todos los scripts en la página (y en la ventana).

En el primer ejemplo,a eslocalVariable.

Las variables locales solo pueden usarse dentro de la función en la que se definen. Para otros scripts y funciones es invisible.

las variables globales y locales con el mismo nombre son variables diferentes. Modificar una no cambia la otra.

sinpalabra clave var Las variables creadas siempre son globales, incluso si se crean en una función.

Vida de las variables

Las variables globales viven tanto como su aplicación (ventana, página web).

Las variables locales no viven mucho tiempo. Se crean en la llamada a la función y se eliminan después de que la función se completa.

Un dilema de contador

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

Puede usar variables globales y funciones para incrementar el contador:

Ejemplo

// Inicializar el contador
var counter = 0;
// Función para incrementar el contador
function add() {
  counter += 1;
}
// Llamar tres veces a add()
add();
add();
add();
// Ahora debería ser 3

Prueba por tu cuenta

Este enfoque tiene un problema: cualquier código en la página puede cambiar el contador sin llamar a add().

Para la función add(), el contador debería ser local para evitar que otro código lo cambie:

Ejemplo

// Inicializar el contador
var counter = 0;
// Función para incrementar el contador
function add() {
  var counter = 0; 
  counter += 1;
}
// Llamar tres veces a add()
add();
add();
add();
// Ahora debería ser 3. Pero es 0.

Prueba por tu cuenta

No es útil porque mostramos el contador global en lugar del contador local.

Al hacer que la función regrese a sí misma, podemos eliminar el contador global y acceder al contador local:

Ejemplo

// Función para incrementar el contador
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Llamar tres veces a add()
add();
add();
add();
// Ahora debería ser 3. Pero es 1.

Prueba por tu cuenta

No es útil porque cada vez que llamamos a una función, reseteamos el contador local.

Las funciones internas de JavaScript pueden resolver este problema.

Funciones anidadas de JavaScript

Todas las funciones tienen derecho a acceder al ámbito global.

De hecho, en JavaScript, todas las funciones tienen derecho a acceder a su ámbito superior.

JavaScript admite funciones anidadas. Las funciones anidadas pueden acceder a su ámbito superior.

En este ejemplo, la función interna plus() puede acceder a la función superior de counter Variable de cuenta:

Ejemplo

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

Prueba por tu cuenta

De esta manera podemos resolver el problema del contador, si podemos acceder desde afuera plus() Función.

También necesitamos encontrar una función que se ejecute solo una vez counter = 0 Método.

Necesitamos un closure (cerrado).

Closures de JavaScript

¿Recuerdas la función autoinvocada? ¿Qué hace esta función?

Ejemplo

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// El contador actual es 3

Prueba por tu cuenta

Ejemplo de explicación

Variable add La asignación es el valor de retorno de la función autoinvocada.

Esta función autoinvocada solo se ejecuta una vez. Establece el contador en cero (0) y devuelve la expresión de la función.

De esta manera, add se convierte en una función. Lo más "excelente" es que puede acceder al contador del ámbito padre.

Esto se llama JavaScript Closure. Esto permite que la función tenga "PrivadoLa variable se vuelve posible.

El contador está protegido por el ámbito de esta función anónima y solo se puede modificar usando la función add.

Un closure es una función que tiene acceso al ámbito del padre, incluso después de que el padre ha cerrado.