Почему не срабатывает метод в объекте?

Question

[Max Ba]

Не вызывается событие. setItem. Проблема в синтаксисе, уверен на 100%, но не пойму как исправить. Помогите исправить.

<div id="block1">
  <input type="button" class="item" value="1">
  <input type="button" class="item" value="2">
  <input type="button" class="item" value="3">
</div>

(function(window){
  
  //конструктор
  window.MyPlugin = function(id){
    this.obj = document.getElementById(id);
    this.buttons = this.obj.getElementsByClassName("item");
    this.myArray = [];
  
    //вешаем на все кнопки событие
    [].forEach.call(this.buttons, function(el){
      el.addEventListener('click', this.setItem);
    });
  }

  MyPlugin.prototype.setItem = function(){
    alert('ok'); //не срабатывает событие)
    //this.myArray.push[this.value];
    //this.showItems();
  };
  
  MyPlugin.prototype.showItems = function(){
    console.log(this.myArray);
  };

})(window);

new MyPlugin("block1");

Answer 1

[0xD34F]

Контекст теряете. Замените function(el){ на (el) => {.

Comments

[Max Ba]

[].forEach.call(this.buttons, (el) => {
  el.addEventListener('click', this.setItem);
});

Заменил, работает, но как-то совсем нестандартно выглядит код. Я даже не понял, что сделал) Мб просто переписать сам цикл на for?

[Max Ba]

Заработало и через for.
Не подскажете, есть разница между реализацией?

for(var i = 0; i < this.buttons.length; i++){
  this.buttons[i].onclick = this.setItem;
}