glaphire
@glaphire
PHP developer

Как разорвать области видимости во вложенных замыканиях?

В книге "Javascript for PHP developers" Стояна Стефанова в разделе "Exercise: onclick Loop" дается пример по теме замыканий - как управлять областью видимости так, чтобы данные во вложенные функции передавались корректно.
Как написать это без замыканий и без вложенных функций я понимаю, но делаю по аналогии с предыдущими примерами по замыканиям из книги и не получается.
Задача: есть три кнопки, при нажатии на каждую нужно алертить ее равильный индекс. Нужно переписать код так, чтобы с использованием вложенных функций правильно "сбить" связь с областями видимости и пробрасывать индекс i в каждой итерации for правильно, а не сохранять ссылку на последнее значение i.
Ссылка на оригинал: www.jspatterns.com/js4php/closure-dom-loop.html
<!doctype html>
<html>
<body>
<button id="button-1">one</button>
<button id="button-2">two</button>
<button id="button-3">three</button>

<script>
for (var i = 1; i <= 3; i++) {
  document.getElementById('button-' + i).onclick = function() {
    alert("This is button: " + i);
  }
}
</script>
</body>
</html>

Ссылка на мой код: jsfiddle

Объясните пожалуйста, как это грамотно исправить или помогите похожим примером.
  • Вопрос задан
  • 107 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Смотря чего от вас хотят. В принципе, достаточно var на let заменить в цикле.

или замыканием https://jsfiddle.net/DelphinPRO/uyoa9d5f/
Или то же самое, только по другому https://jsfiddle.net/DelphinPRO/uyoa9d5f/1/
Ответ написан
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
function makeHandler(i) {
  return function() {
    alert("This is button: " + i);
  }
}

for (var i = 1; i <= 3; i++) {
  document.getElementById('button-' + i).onclick = makeHandler(i);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы