En este artículo, discutiremos sobre los cierres que funcionan con JavaScript. Primero comprendamos qué son exactamente los cierres y los detalles básicos que están asociados con los cierres en JavaScript.
Un Cierre es una combinación de una función encerrada con referencias a su estado circundante (el entorno léxico). En JavaScript, los cierres se crean cada vez que se crea una función en tiempo de ejecución. En otras palabras, un cierre es solo un nombre elegante para una función que recuerda las cosas externas que se usan en su interior.
Veamos algunos ejemplos para comprender cómo funcionan realmente los cierres en JavaScript.
Ejemplo 1:
- En este ejemplo, declararemos un cierre que eventualmente accedería a un saldo variable externo desde la función externa.
- Después de usar la variable externa en la función más interna, ese cierre en particular nos ayudará a deducir 100 cada vez que se llame a esa función externa.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<button type="button" onclick="initaccount()">
Click Me!
</button>
<p id="demo"></p>
<script>
function initaccount() {
var balance = 1000;
function currentbalance() {
balance = balance - 100;
alert(balance);
}
currentbalance();
}
</script>
</body>
</html>
Producción:
Explicación: En el ejemplo anterior, currentbalance() puede acceder al saldo de la variable externa, por lo tanto, el saldo se deduce en 100 cada vez que se llama al método initaccount().
Ejemplo 2: Los cierres se pueden anidar tan bien como en el siguiente ejemplo. Aquí, en el ejemplo, tanto la función externa() como la función interna() tienen acceso a la variable de contador, por lo tanto, al llamar a Counter(), tanto la función externa() como la función interna() incrementan el valor del contador. En este contexto, podemos decir que los cierres tienen acceso a todos los ámbitos de funciones externas.
HTML
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Closures</h2>
<button type="button" onclick=" Counter()">
Click Me!
</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function Counter() {
var counter = 0;
function outerfunction() {
counter += 1;
document.getElementById("demo1").innerHTML
= "outercounter = " + counter +
"from outerfunction " ;
function innerfunction() {
counter += 1;
document.getElementById("demo2").innerHTML
= " innercounter = " + counter +
"from innerfunction ";
};
innerfunction();
};
outerfunction();
};
</script>
</body>
</html>
Producción:
