Cierres de JavaScript
Las variables de JavaScript pueden pertenecer al ámbito local o global .
Las variables globales se pueden hacer locales (privadas) con cierres .
Global Variables
A functionpuede acceder a todas las variables definidas dentro de la función, así:
Ejemplo
function myFunction() {
let a = 4;
return a * a;
}
Pero a functiontambién puede acceder a variables definidas fuera de la función, como esta:
Ejemplo
let a = 4;
function myFunction() {
return a * a;
}
En el último ejemplo, a es una variable global .
En una página web, las variables globales pertenecen al objeto ventana.
Todas las secuencias de comandos en la página (y en la ventana) pueden usar (y cambiar) las variables globales.
En el primer ejemplo, a es una variable local .
Una variable local solo se puede usar dentro de la función donde está definida. Está oculto de otras funciones y otros códigos de secuencias de comandos.
Las variables globales y locales con el mismo nombre son variables diferentes. Modificando uno, no modifica el otro.
Las variables creadas sin una palabra clave de declaración ( var,
leto const) siempre son globales, incluso si se crean dentro de una función.
Ejemplo
function myFunction() {
a = 4;
}
Vida útil variable
Las variables globales viven hasta que se descarta la página, como cuando navega a otra página o cierra la ventana.
Las variables locales tienen vidas cortas. Se crean cuando se invoca la función y se eliminan cuando finaliza la función.
Un contradilema
Suponga que desea utilizar una variable para contar algo y desea que este contador esté disponible para todas las funciones.
Podría usar una variable global y una functionpara aumentar el contador:
Ejemplo
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Hay un problema con la solución anterior: cualquier código en la página puede cambiar el contador, sin llamar a add().
El contador debe ser local para la add()función, para evitar que otro código lo cambie:
Ejemplo
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
No funcionó porque mostramos el contador global en lugar del contador local.
Podemos eliminar el contador global y acceder al contador local dejando que la función lo devuelva:
Ejemplo
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
No funcionó porque reiniciamos el contador local cada vez que llamamos a la función.
Una función interna de JavaScript puede resolver esto.
Funciones anidadas de JavaScript
Todas las funciones tienen acceso al alcance global.
De hecho, en JavaScript, todas las funciones tienen acceso al alcance "sobre" ellas.
JavaScript admite funciones anidadas. Las funciones anidadas tienen acceso al alcance "sobre" ellas.
En este ejemplo, la función interna plus()tiene acceso a la countervariable en la función principal:
Ejemplo
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Esto podría haber resuelto el dilema del contador, si pudiéramos llegar a la plus()
función desde el exterior.
También necesitamos encontrar una manera de ejecutar counter = 0solo una vez.
Necesitamos un cierre.
Cierres de JavaScript
¿Recuerdas las funciones de autoinvocación? ¿Qué hace esta función?
Ejemplo
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Ejemplo explicado
La variable addse asigna al valor de retorno de una función de autoinvocación.
La función de autoinvocación solo se ejecuta una vez. Establece el contador en cero (0) y devuelve una expresión de función.
De esta manera add se convierte en una función. La parte "maravillosa" es que puede acceder al contador en el ámbito principal.
Esto se llama un cierre de JavaScript. Hace posible que una función tenga variables " privadas ".
El contador está protegido por el alcance de la función anónima y solo se puede cambiar mediante la función de agregar.
Un cierre es una función que tiene acceso al ámbito principal, incluso después de que la función principal se haya cerrado.