JavaScript Cierres


Las variables en JavaScript pueden ser locales o globales.

Los cierres se pueden usar para variables privadas.


Variables Globales

Una función puede acceder a las variables definidas dentro de la función, por ejemplo:

Ejemplo

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

Pruébalo »

Una función también puede acceder a variables definidas fuera de la función, por ejemplo:

Ejemplo

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

Pruébalo »

En el último ejemplo,aes unaglobalvariable.

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

Las variables globales se pueden usar en todos los scripts de la página.

En el primer ejemplo,aes unalocalvariable.

Las variables locales solo se pueden usar dentro de la función donde se definen. No están disponibles para otras funciones o código de script.

Las variables globales y locales, incluso si tienen el mismo nombre, son dos variables diferentes. Modificar una no afecta el valor de la otra.

Note Si al declarar una variable no se usa lavarpalabra clave, entonces es una variable global, incluso si se define dentro de una función.


Ciclo de Vida de las Variables

El ámbito de las variables globales es global, es decir, en todo el programa JavaScript, las variables globales están en todas partes.

Las variables declaradas dentro de una función solo funcionan dentro de la función. Estas variables son locales y su ámbito es local; los parámetros de la función también son locales y solo funcionan dentro de la función.


El Problema del Contador

Imagina que quieres contar algunos valores y que el contador esté disponible en todas las funciones.

Puedes usar una variable global, y la función incrementa el contador:

Ejemplo

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

Pruébalo »

El valor del contador cambia cuando se ejecuta la función add().

Pero aquí está el problema: cualquier script en la página puede cambiar el contador, incluso sin llamar a la función add().

Si declaro el contador dentro de la función, no se puede modificar el valor del contador sin llamar a la función:

Ejemplo

function add() { var counter = 0; return counter += 1; } add(); add(); add(); //La intención era mostrar 3, pero contra lo esperado, ¡siempre muestra 1!

Pruébalo »

El código anterior no mostrará el resultado correcto; cada vez que llamo a la función add(), el contador se establece en 1.

Las funciones anidadas en JavaScript pueden resolver este problema.


Funciones Anidadas en JavaScript

Todas las funciones pueden acceder a variables globales.

De hecho, en JavaScript, todas las funciones pueden acceder al ámbito de su nivel superior.

JavaScript admite funciones anidadas. Las funciones anidadas pueden acceder a las variables de la función del nivel superior.

En este ejemplo, la función anidadaplus()puede acceder a la variablecounterde la función padre:

Ejemplo

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

Pruébalo »

Si pudiéramos acceder desde fuera a laplus()función, podríamos resolver el problema del contador.

También necesitamos asegurarnos de quecounter = 0solo se ejecute una vez.

Necesitamos cierres.


Cierres en JavaScript

¿Recuerdas la función de auto-invocación? ¿Qué hace esta función?

Ejemplo

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

Pruébalo »

Análisis del Ejemplo

La variableaddadd recibe el valor de retorno de la función de auto-invocación.

La función de auto-invocación se ejecuta solo una vez. Establece el contador en 0 y devuelve la expresión de función.

La variable add se puede usar como una función. La parte genial es que puede acceder al contador del ámbito superior de la función.

Esto se llama cierre enJavaScript.Hace posible que las funciones tengan variables privadas.

El contador está protegido por el ámbito de la función anónima y solo se puede modificar mediante el método add.

Note

El cierre es un mecanismo para proteger variables privadas. Crea un ámbito privado cuando la función se ejecuta, protegiendo así las variables privadas internas de interferencias externas.

De forma intuitiva, un cierre es como un entorno de pila que no se destruye.

Otras extensiones