Почему переменная не перезаписывается?

Question

[VladMokrousov]

Привет, для лучшего понимания вопроса перейдите, пожалуйста, сюда https://codepen.io/VladMokrousov/pen/abdNXXP?edito... и выполните следующие действия:
1.Нажмите на первую кнопку
2.Нажмите на вторую кнопку
3.Снова нажмите на первую кнопку
4.И еще раз на вторую
Теперь вы можете наблюдать в консоли 2 переменные, которые продолжают увеличиваться при нажатии второй кнопки и вообще существовать независимо друг от друга.
Собственно вопрос - какого черта так происходит? Почему переменная просто не перезаписывается?

Comments

[RAX7]

https://learn.javascript.ru/closures

Answer 1

[Dima Polos]

Второй обработчик видит а по замыканию. Когда кликаете второй раз по первой кнопке запускается новая функция, которая создает новую "а" и новый обработчик события, после второго клика по второй кнопке срабатывает два обработчика и в консоли видим и 10 и 15 сразу, потому что два обработчика срабатывают на второй кнопке и каждый видит свою а по замыканию.
Вместо этого просто объявите а без значения за пределами всех обработчиков и пусть они по замыканию видят всегда одну и ту же переменную.

Comments

[VladMokrousov]

Забавно, мне казалось логичным, что переменная в этом случае должна перезаписываться, спасибо. То есть первая a продолжает существовать где-то в памяти, и при этом мы к ней доступа больше не имеем?

[Dima Polos]

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

[Dima Polos]

VladMokrousov, если существует функция, то она имеет доступ к тому пространству имен, которое было в момент ее создания, при каждом клике создается новый обработчик и вместе с ним новое замыкание, попробуйте раза 4-5 нажать то одну, то вторую кнопки и увидите в консоли: 10 15 20 25 30... после нажатия на вторую кнопку

[Dima Polos]

VladMokrousov, благодаря таким возможностям можно реализовывать декораторы и писать в функциональной парадигме.

Answer 2

[Дмитрий]

Потому что каждый раз при нажатии на первую кнопку добавляется listener. Он не перезаписывается. Соответственно при нажатии на вторую кнопку срабатывают все ранее подключенные нажатием на первую кнопку listener-ы. И поскольку переменная a объявлена внутри функции, то увеличиваются все a внутри всех ранее подключенных слушателей.