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

Question

Николай @nikolay_akhmetyanov

Front-end developer

JavaScript

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

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

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

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

Вопрос задан более трёх лет назад
1000 просмотров

2 комментария

Подписаться 6 Простой 2 комментария

Вы хоть напишите, чему равно photos, что за thumbnails
Дмитрий Дерепко, да это не важно, и так всё очевидно)

Answer 1 · 2019-07-24 19:06:10

Не работает, потому что к тому времени, когда функция 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]);
}

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

Войдите на сайт