Un cierre es una combinación de una función agrupada (encerrada) con referencias a su estado circundante (el entorno léxico). En otras palabras, un cierre le da acceso al alcance de una función externa desde una función interna.
Ejemplo: Aquí el interior forma un cierre con el exterior. La variable str puede llamarse un miembro privado cuyo valor podemos acceder, pero no modificar directamente.
Javascript
<script>
function outer() {
let str = "GeeksforGeeks";
function inner() {
console.log(str);
}
return inner;
}
const fun = outer();
fun();
</script>
Producción:
GeeksforGeeks
El concepto de un contador privado significa que públicamente/globalmente no podemos modificar la variable del contador directamente. La siguiente guía paso a paso le enseñará cómo implementar un contador privado con cierre y entenderlo.
Paso 1: Cree archivos counter.js e index.html . Puede dar cualquier nombre permitido a los archivos.
Paso 2: Primero comience con el archivo index.html y cree una interfaz para ver el contador. Crearíamos un <div> para mostrar el valor del contador y dos botones, uno para incrementar y otro para decrementar el contador.
index.html
<!DOCTYPE html> <html lang="en"> <head> <!-- counter.js becomes available at execution time--> <script src="counter.js"></script> </head> <body> <h1 style="color: blue;"> Private Counter using Closure </h1> <!-- This div displays the value of private counter--> <div id="counter_div" style= "margin-left: 5%; color: red;"> <!-- Default value of counter is zero--> <h2>0</h2> </div> <!-- Buttons for incrementing and decrementing the value of private counter--> <button onclick="counterHandler(this)" value="1"> Increment </button> <button onclick="counterHandler(this)" value="0"> Decrement </button> </body> </html>
Aquí manejamos los clics en los botones usando la función counterHandler que se encuentra en el archivo JavaScript. El valor de los botones nos ayuda a distinguir en qué botón se hizo clic. Y tenga una identificación del div para que podamos usarlo para actualizarlo desde el código JavaScript.
Paso 3: ahora trabajemos con el archivo counter.js e implementemos funciones detrás de escena.
counter.js
// Global function which would form
// closure with modify function
function counter() {
// Private counter variable
let count = 0;
// To increment the value of counter
function increment() {
count++;
}
// To decrement the value of counter
function decrement() {
count--;
}
// Modify function forms closure
// here which is used outside
function modify(val) {
// To check increment or decrement
// button has been clicked
if (val === "1") increment();
else if (val === "0") decrement();
// Return the counter
return count;
}
// Returning to make it available
// outside counter function
return modify;
}
// Storing the closure modify
const closure = counter();
// This function handles the button
// click, objButton to get value
function counterHandler(objButton) {
// Storing the value return by modify
let count = closure(objButton.value);
// Getting div by it's id
// and modifying its inner html
document.getElementById("counter_div")
.innerHTML = "<h2>" + count + "</h2>";
}
Cuando se hace clic en los botones , se llama a counterHandler , obtenemos el valor del botón de objButton Object. Si el valor es uno (1), entonces se incrementará; de lo contrario, se decrementará el valor del contador, que es la variable de conteo .
En la función de contador , tenemos una cuenta de variable de contador , una función de incremento para incrementar y una función de decremento para disminuir el valor en uno. La función de modificación se devuelve como cierre del global cuando se llama a la función de contador y almacenamos su instancia en la constante de cierre .
Finalmente, modificamos el contenido div al valor del contador devuelto por el cierre usando su propiedad innerHTML .
Paso 3: copie la ruta completa del archivo HTML index.html y péguelo en cualquier navegador. Después de cargar el archivo HTML en el navegador, verá algo similar. Ahora juegue con los botones de incremento y decremento y observe cómo cambia el valor del contador.
Ahora veamos qué sucede en el backend usando Developers Tool cuando se hace clic en el botón. En la imagen de abajo, hicimos que el valor del contador sea igual a -1. Para ver cómo se define el alcance y se relaciona con él.
Ámbito en la herramienta para desarrolladores
Contravalor en la interfaz
Así es como podría implementar una variable de contador privado usando cierres en JavaScript. Los cierres proporcionan una forma de lograr la funcionalidad de encapsulación de datos en JavaScript.
Referencias: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Publicación traducida automáticamente
Artículo escrito por devrajkumar1903 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA