closures - область видимости js - Как работают JavaScript-закрытия?

замыкание js на английском / javascript / function / variables / scope

Как бы вы объяснили замыкание JavaScript человеку,который знает,из каких понятий он состоит (например,функции,переменные и т.п.),но не понимает,из каких понятий он состоит,но не понимает самих замыканий?

28 revs, 21 users 17%



Answer #1
// Объявляем счетчик вне области действия обработчика событий
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Увеличиваем внешний счетчик
  counter++;

  if (counter === 3) {
    // Делаем что-то каждый третий раз
    console.log("Third time's the charm!");

    // Сброс счетчика
    counter = 0;
  }
});
<button id="button">Click Me!</button>
var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // инициализируем счет до 0
  var count = 0;

  return function(e) { // <- Эта функция становится обработчиком кликов
    count++; // и сохранит доступ к указанному выше `count`

    if (count === 3) {
      // Делаем что-то каждый третий раз
      console.log("Third time's the charm!");

      // Сброс счетчика
      count = 0;
    }
  };
})());
<button id="button">Click Me!</button>

Простое закрытие в одну линию

// _______________________ Вызывается сразу ______________________
//         |                                                                |
// | Объем сохранен для использования ___ Возвращен как ____ |
// | только по возвращаемой функции | значение функции | |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Все переменные вне функции возврата доступны для возвращаемой функции,однако они не доступны непосредственно объекту возвращаемой функции....

func();  // Предупреждения "val"
func.a;  // Неопределенный