Лексическое окружение и замыкание. Правильно ли понимаю?

Question

[Илья Корень]

Всем привет! Я новичок и пытаюсь разобраться на тему: "Замыкания в JS".
Просьба помочь разобраться, т.к. сижу и не могу до конца понять следующее:

Вопрос 1. Правильно ли я понимаю данные термины:
Контекст выполнения - это окружение, в рамках которого выполняется код. Т.е. как я понимаю, контекст выполнения - это кусок кода который в настоящий момент выполняется.
Перед запуском JS-кода создается контекст выполнения, который в свою очередь подразделяется на несколько этапов:
1. Привязка this
2. Формирование Lexical Environment (лексического окружения)
3. Формирование Variable Environment (окружения переменных) - тут непонятно зачем? Если данные
переменных хранятся в лексическом окружении?
Лексическое окружение - это некий скрытый объект, у которого есть 2 компонента:
а) запись окружения - это просто хранилище данных, переменных, функций и их значений. Т.е. просто в памяти сохранились значения для их дальнейшего использования.
b) ссылка на внешнее окружение. Тут не пойму для чего это. Т.е. тут как бы, какие внешние данные доступны в текущем окружении, верно?)

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

function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

let counter1 = makeCounter();
let counter2 = makeCounter();

alert( counter1() ); // 0
alert( counter1() ); // 1

alert( counter2() ); // 0 (независимо)

Вот у нас есть счетчик, оформленный с помощью замыкания.

Вопрос 2. Почему при первом alert(counter()) мы получаем значение: 0?
При первом alert(counter()) создается новое лексическое окружение этой функции:
- объявляется переменная let count со значением: "0",
- и вызов функции counter должен при первого alert возвращать 1, т.к. выполняется return count++ почему же он возвращает: "0"?

Вопрос 3. Почему если мы вызываем повторно функцию alert, то счетчик будет увеличиваться, если для каждого вызова функции создается новое лексическое окружение, т.е. при каждом вызове должно возвращаться одно и то же значение. Т.е. разные лексические окружения создаются при вызовах и они между собой никак не связаны.

Помогите пожалуйста понять и разобраться с данными вопросами. Будут предельно благодарен!

Comments

[Александр]

Вопрос 2. Это операция постинкремента, а чтобы возвращался результат икремента надо использовать преинкремент (++i).
Вопрос 3. Потому что makeCounter вернула Вам функцию, в области видимости которой (в замыкании) есть переменная count, которая увеличивается с каждым вызовом внутренней функции makeCounter.

[Илья Корень]

Александр, Спасибо большое, вопрос 2 понял.
Не могли бы вы пожалуйста подсказать еще раз по вопросу 3?
Не могу понять, в чем тогда разница между alert(counter1()) - который второй и alert(counter2()), но при этом у них разные значения?

[Сергей delphinpro]

Илья Malone, makeCounter при вызове создает новое замыкание. У вас двумя вызовами получаются два независимых счетчика.

[Сергей delphinpro]

Вопрос 3

Окружение создается при вызове makeCounter. В этом окружении есть переменная count и анонимная функция. Эта анонимная функция возвращается. И именно она потом вызывается. Анонимка и count в одном окружении.

[Илья Корень]

Сергей delphinpro, да я это понимаю, но я не понимаю почему не происходит нового независимого замыкания, когда я вызываю второй alert(counter1())?
Т.е. не понимаю, почему:
alert(counter1()) - 0;
alert(counter1()) - 1; почему второй вызов берет значение из первого? Разве тут не должен создаваться новый независимый счетчик?

[Сергей delphinpro]

Илья Malone, не понимаете.

count находится в замыкании makeCounter. Функцию makeСounter Вы вызываете один раз. Почему count должна сброситься в ноль?
Дергая функцию counter1() – вы не вызываете makeCounter/ Вы вызываете анонимную функцию, которая была возвращена , вот эту

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

[Илья Корень]

Ааа, начинаю понимать.
Т.е. когда я объявил let counter1 = makeCounter() - тот тут я как раз таки вызываю makeCounter, которая замкнула значение переменной count и на выходе я получаю вложенную анонимную функцию:

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

Т.е. грубо говоря у меня counter1 = анонимная функция. И когда я вызываю counter1(), то получаю это:

let count = 0;
  function() {
    return count++;
  };

Верно?)

Answer 1

[Stalker_RED]

1. В целом понимание правильное, но не до конца.

2. return count++ вернет 0, и после этого увеличит счетчик. Если бы было return ++counter;, то вернулось бы уже измененное значение. Читайте разницу префиксного и постфиксного инкремента.

3. makeCounter() вызывается дважды, дальше идут вызовы counter1 или counter2, LE которых было создано при вызове makeCounter.

Comments

[Илья Корень]

Супер, спасибо за информацию!