1

При объяснении как работает [[Scope]] зачачстую встречается такой пример:

function makeCounter() {
      var currentCount = 1;

      return function() {
        return currentCount++;
      };
    }

    var counter = makeCounter();

    alert( counter() ); // 1
    alert( counter() ); // 2
    alert( counter() );

Почему такой счетчик работает - для меня совершенно непонятно.

Каким образом число сохраняеется если каждый раз функция присваевает переменной еденицу?

6
  • Функция makeCounter вызывается и присваивает переменной единицу только один раз.
    – user176262
    10 мая 2018 в 17:44
  • Почему? Как тогда вызывается функция внутри нее?
    – user272575
    10 мая 2018 в 17:46
  • @brachkoff Вот так: counter()
    – user176262
    10 мая 2018 в 17:47
  • 1
    counter не вызывает makeCounter. counter и есть та анонимная функция
    – vp_arth
    10 мая 2018 в 17:54
  • 1
    На самом деле, этот вопрос это точный дубликат, и его необходимо закрыть. 10 мая 2018 в 17:54

2 ответа 2

2

Чтобы было легче понять пример, рекомендую отвлечься от замыканий:

var currentCount = 1;

var counter = function() {
  return currentCount++;
};

console.log(counter(), counter(), counter());

Пример из вопроса отличается только тем, что этот код завёрнут в функцию, которая позволяет иметь несколько счётчиков со своими внутренними переменными в каждой.

function getCounter() {
  // тот же код
  var currentCount = 1;

  var counter = function() {
    return currentCount++;
  };

  // вернём counter
  return counter;
}


var c1 = getCounter(); // вызываем всего 1 раз, значит и единицу присвоим один раз
// в переменной c1 в данный момент функция из локальной переменной counter
console.log('c1 =', c1);

// и мы можем вызывать её, как и в примере без функции выше
console.log('c1()', c1(), c1());

// Также, всегда можно получить новый счётчик:
var c2 = getCounter();
console.log('c2()', c2(), c2(), c2());

   

2
  • Ну и конечно же тем, что переменная в вопросе не валяет в глобале xDD 10 мая 2018 в 18:08
  • Для этого можно всё это в IIFE завернуть, но будет отвлекать от сути.
    – vp_arth
    10 мая 2018 в 18:10
1

Такой подход называется замыканием. Дело в том, что когда функция makeCounter() вызывается, то поднимается скоуп, в котором создается переменная. Переменная в свою очередь используется в анонимной функции, которую возвращает текущая функция makeCounter и при удалении скоупа эта переменная не может быть удалена т.к. она используется в анонимной функции. Поэтому эта переменная "висит" в памяти и к ней обращается анонимная функция, сохраняя значения между контекстами.

Это вкратце. Вроде ничего не напутал. Более подробно можно почитать например тут – https://learn.javascript.ru/functions-closures

P.S. makeCounter() не вызывает анонимную функцию, а возвращает ее и она у вас находится в переменной counter, которую вы вызываете как функцию.

P.P.S. На эту тему есть кстати много ответов уже, и вот один из них. Спасибо @MedvedevDevКак работают замыкания в JavaScript

P.P.P.S Как работают функциональные выражения можно почитать например тут – https://learn.javascript.ru/function-declaration-expression

5
  • Этот пример оттуда
    – user272575
    10 мая 2018 в 17:51
  • И что вызывает counter()?
    – user272575
    10 мая 2018 в 17:56
  • Анонимную функцию, которую вернула функция makeCounter()
    – korytoff
    10 мая 2018 в 17:57
  • Почему только ее?
    – user272575
    10 мая 2018 в 17:58
  • @brachkoff потому что только она лежит в переменной, которую вы вызываете как функцию. Добавил в ответ. Можно почитать тут learn.javascript.ru/function-declaration-expression
    – korytoff
    10 мая 2018 в 17:59