0
var add_the_hendlers = function(node) { 
    var i; 
    for(i = 0; i < node.length; i++) { 
        node[i].onclick = function() { 
            console.log(i) 
        } 
    } 
}

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

0

3 ответа 3

2
var add_the_hendlers = function(node) { 
  var i; 
  for(i = 0; i < node.length; i++) { 
    (function(j) {
      node[j].onclick = function() { 
        console.log(j) 
      };
    })(i);
  } 
}

В этом случае переменная будет скопирована в область видимости замыкания. При этом контекст останется верным (в отличии от bind)

3
  • 1
    классическое решение :-) в идеале стоило бы название параметра поменять, а то сейчас слишком много i :-D
    – Grundy
    14 янв 2016 в 12:27
  • Да, я именно за него т.к. мне кажется это не тот случай где bind нужен, тем более вопрос похож на те, что дают на собеседовании, обычно там ожидают именно такой ответ. Поменял) 14 янв 2016 в 12:32
  • Для общих знаний вполне и bind подойдет, только я бы все-таки не на this а на первый параметр делал
    – Grundy
    14 янв 2016 в 12:34
1
for(var i = 0; i < node.length; i++) { 
    node[i].onclick = function(event) {
        console.log(+this,event.target); 
    }.bind(i); 
}
12
  • 1
    плохое решение: i в this - станет объектом, а не примитивным числом
    – Grundy
    14 янв 2016 в 11:35
  • Какой ужас. Его можно превратить в число одним символом
    – Darth
    14 янв 2016 в 11:47
  • Конечно :-) если знать что там будет объект, а не рассчитывать на примитив :-)
    – Grundy
    14 янв 2016 в 11:48
  • Кроме того, в вашем случае теряется ссылка на сам элемент по которому щелкнули
    – Grundy
    14 янв 2016 в 11:50
  • 1
    arguments[0].target (добавил в ответ)
    – Darth
    14 янв 2016 в 11:52
0

Т.к. на момент клика по элементу у вас уже прошел цикл for и i стал равен 3, поэтому на момент клика вы видите последний инкремент. Воспользуйтесь функцией .bind для сохранения нужного контекста.

var add_the_hendlers = function(node) { 
    var i; 
    for(i = 0; i < node.length; i++) { 
        node[i].onclick = function() {
            console.log(this); 
        }.bind(i); 
    } 
}
5
  • 1
    код неверен - в момент выполнения i = уже равно 3, поэтому нет смысла 3 присваивать переменной x :-D
    – Grundy
    14 янв 2016 в 11:20
  • Прошу прощения, поправил код.
    – DStrokov
    14 янв 2016 в 11:44
  • 1
    console.log(this); выведет объект, а не примитив. Тот же недочет, что был в соседнем ответе. Чтобы не повторяться, лучше пропихнуть его как параметр
    – Grundy
    14 янв 2016 в 11:51
  • 1
    Кроме того, в вашем случае теряется ссылка на сам элемент по которому щелкнули
    – Grundy
    14 янв 2016 в 11:51
  • Согласен, не надо затирать this, тем более this это объект и пытаться присвоить ему простое значение - плохой подход. 14 янв 2016 в 12:28

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.