Me encantaría entender cómo ocurre exactamente el cierre en este conjunto de código y la forma en que se implementa. Estaba viendo un tutorial y el tipo estaba dando un ejemplo sobre la función de devolución de llamada y también dio un ejemplo de cierre allí.
function attachEventListeners() { let count = 0 document.getElementById("clickMe").addEventListener("click", function () { console.log("Button Clicked", ++count) }) attachEventListeners()Pensé que para que funcionara una función de conteo basada en cierres, tenía que devolver esa función y asignarla a una variable. Porque de lo contrario, con cada llamada de la función externa, la cuenta se inicializaría en 0. Pero, ¿cómo funciona aquí?
El cierre es esencialmente un caso en el que una función dentro de otra función sale de su propio ámbito para capturar variables que están en el ámbito de la función exterior.
function attachEventListeners() { let count = 0 document.getElementById("clickMe").addEventListener("click", function () { console.log("Button Clicked", ++count) }) En este ejemplo, la función anónima entregada al detector de eventos toma e incrementa el count de variables en el alcance de la función attachEventListeners .
Está devolviendo una nueva función al oyente cada vez, pero cada vez que está adjuntando un nuevo oyente al botón, lo cual es una tontería.
Agregue un oyente al botón. Llame al controlador que devolverá el cierre como la función que se llamará cuando se despida el oyente.
const button = document.getElementById('clickMe'); // Call the handler that returns a function (your closure) // that acts as the the listener. It only needs to be called once. button.addEventListener('click', handler(), false); function handler() { let count = 0; // The closure contains, and updates, the variable in // its local environment when it's returned return function () { console.log('Button Clicked', ++count); }; }; <button id="clickMe">Click me</button>