closures - scope en javascript - ¿Cómo funcionan los cierres de JavaScript?

nested functions javascript / javascript / function / variables / scope

¿Cómo explicarías los cierres de JavaScript a alguien que conoce los conceptos en los que consisten (por ejemplo,funciones,variables y similares),pero que no entiende los cierres en sí?

28 revs, 21 users 17%



Answer #1
// Declarar contador fuera del alcance del controlador de eventos
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Incremento del contador exterior
  counter++;

  if (counter === 3) {
    // Haz algo cada tres veces
    console.log("Third time's the charm!");

    // Reiniciar contador
    counter = 0;
  }
});
<button id="button">Click Me!</button>
var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // inicia la cuenta a 0
  var count = 0;

  return function(e) { // <- Esta función se convierte en el controlador de clics
    count++; // y conservará el acceso al `recuento` anterior

    if (count === 3) {
      // Haz algo cada tres veces
      console.log("Third time's the charm!");

      //Reiniciar contador
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

Un simple cierre de una línea

// _______________________ Invocado inmediatamente______________________
//         |                                                                |
// | Alcance retenido para su uso ___Devuelto como____ |
// | solo por función devuelta | valor de func | |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Todas las variables fuera de la función devuelta están disponibles para la función devuelta,pero no están directamente disponibles para el objeto de la función devuelta...

func();  // Alerta "val"
func.a;  // Indefinido