Замыкания в чем конкретно разница?

Question

[Николай]

Необходимо каждому элементу коллекции добавить обработчик.

Этот код работает

var addThumbnailClickHandler = function (thumbnail, photo) {
  thumbnail.addEventListener('click', function () {
    fullPhoto.src = photo;
  });
};

for (var i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i], photos[i]);
}

Этот код нет!

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = photos[i];
  });
}

Хоть убей не понимаю почему! Объясните мне пожалуйста простыми словами. Я понимаю, что здесь замыкание и тд. Я не понимаю почему второй вариант не работает, ведь есть переменная var которая увеличивается на 1, но fullPhoto.src всегда равно 5

Comments

[Дмитрий Дерепко]

Вы хоть напишите, чему равно photos, что за thumbnails

[dollar]

Дмитрий Дерепко, да это не важно, и так всё очевидно)

Answer 1

[Боря Федоров]

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () { // Корень проблемы здесь.
    // Ты обьявляешь (не вызываешь!) в цикле анонимную функцию. При создании эта функция получает
    // ссылку на внешнее лексическое окружение, которым, в данном случае, является тело цикла for.
    // Когда функция вызывается, в своем лексическом окружении i она не находит, и продолжает поиск
    // во внешнем. К моменту вызова, цикл завершен, и i в его лексическом окружении равна thumbnails.length
    fullPhoto.src = photos[i];
  });
}

Answer 2

[dollar]

Не работает, потому что к тому времени, когда функция onclick будет вызвана, переменная i дойдет до самого конца цикла. И будет использоваться именно это, последнее значение.

В первом варианте переменная i используется в конкретной итерации, т.е. берется photos[i] и это значение дальше передаётся, а сама переменная i больше не используется, так что в целом пофиг, как там она дальше будет изменяться.

Ведь в первом варианте вызов addThumbnailClickHandler(thumbnails[i], photos[i]) происходит прямо в цикле, сразу, без промедлений, а не откладывается на потом. В этот момент конкретные значения передаются в качестве параметров. И далее из-за замыкания они так и остаются висеть в памяти и ссылаться на то, что нужно.

Немного изменим код, и он снова перестанет работать :)

var i;

var addThumbnailClickHandler = function (thumbnail) {
  thumbnail.addEventListener('click', function () {
    fullPhoto.src = photos[i]; // i === thumbnails.length
  });
};

for (i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i]);
}

Answer 3

[Афанасий Захаров]

поменяйте var на let - это быстрое решение.

https://learn.javascript.ru/closures-usage

а вот тут, в задачках - решение вашей проблемы

Comments

[dollar]

Афанасий Захаров, да я уже проверил, вы ответили на давно удаленный коммент. Хотя явление интересное. Ведь согласно здравому смыслу ячейка с переменной одна и та же. Т.е. это скрытый массив какой-то. Точнее, каждая итерация по сути является как бы вызовом функции.

[Афанасий Захаров]

dollar, нет, не скрытым вызовом функции,
просто у const и let другая оласть видимости - не функция, а блок, между { и }.
Каждая итерация - новый блок.

Answer 4

[profesor08]

Читай что такое var и что такое let

for (let i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = photos[i];
  });
}