Почему идет обращение сразу к вложенной функции и игнорируется внешняя?

Question

[Stpnki]

Я читаю учебник (https://learn.javascript.ru/closure), и не могу никак взять в толк, почему так. Такой пример:

function makeCounter() {
  let count = 0;

  return function() {
    return count++; // есть доступ к внешней переменной "count"
  };
}

let counter = makeCounter();

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

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

alert(makeCounter());

Результат:
function () {
    return count++; // есть доступ к внешней переменной "count"
  }

2. Почему в следующих итерациях count увеличивается на 1. Хотя, функция makeCounter должна вызываться как бы заново, и присваивать переменной count = 0. И только на следующем шаге увеличивать на 1. Я пробовал запускать через визуализатор и получается, что переменной count присваивается 0 только один раз, а все остальные вызовы идет обращение сразу к вложенной функции, соответственно, переменная остается такой же, как и в предыдущей итерации, не обнуляется.
Про область видимости читал).

В общем, мне по большей части не понятно, почему идет обращение сразу к вложенной функции и игнорируется внешняя, где переменной count присваивается 0.

Answer 1

[Алексей Ярков]

Про область видимости читал)

Видимо не дочитал))
Вызов makeCounter() возвращает анонимную функцию, которая в дальнейшем и вызывается. Соответственно переменная count инициализируется однажды и дальше доступна внутри анонимной функции.

Comments

[Stpnki]

Я вот и не могу понять, почему сразу вызывается анонимная функция, по идее, должна же сначала срабатывать внешняя, а потом вложенная в неё. По цепочке. А получается, что внешняя срабатывает единожды (ещё до обращения к ней), и потом только вложенная. Короче, я не понимаю, почему переменной let count не присваивается 0, а сразу возвращает вложенную.

Answer 2

[ClayRing]

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

В первом примере вы выводите результат работы функции `counter()` (это число). Во втором примере вы выводите результат работы функции `makeCounter()` (это функция `counter()`).

Попробуйте сделать так:
`alert(makeCounter()())`
И посмотреть на содержимое. Думаю станет понятнее.

Почему в следующих итерациях count увеличивается на 1. Хотя, функция makeCounter должна вызываться как бы заново, и присваивать переменной count = 0.

С чего это она должна вызываться заново? Вы вызываете `makeCounter()` только один раз, а далее на каждой итерации вызываете только `counter()`.

Comments

[Stpnki]

С чего это она должна вызываться заново? Вы вызываете `makeCounter()` только один раз, а далее на каждой итерации вызываете только `counter()`.

так я вот и не понимаю, почему)

[Stpnki]

Попробуйте сделать так:
`alert(makeCounter()())`
И посмотреть на содержимое. Думаю станет понятнее.

Ну чуть понятней стало. Надо копать в сторону двух пар скобок!))

Answer 3

[ArturHabr]

почему идет обращение сразу к вложенной функции и игнорируется внешняя,

.
Не сразу.
let counter = makeCounter(); - Здесь в переменную counter присваивается результат вызова makeCounter() и результатом будет возвращённая функция:
return function() {
return count++; // есть доступ к внешней переменной "count"
};
Далее мы вызываем собственно counter() (не забываем, что у него в теле лежит увеличение счётчика).

Comments

[Stpnki]

Хорошее объяснение, спасибо большое!