Объясните, чем здесь является elem.onclick?

Question

[Константин]

Код:

<div id="menu">
  <button data-action="save">Сохранить</button>
  <button data-action="load">Загрузить</button>
  <button data-action="search">Поиск</button>
</div>

class Menu {
    constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

    save() {
      alert('сохраняю');
    }

    load() {
      alert('загружаю');
    }

    search() {
      alert('ищу');
    }

    onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    }
  }

  new Menu(menu);

Не понимаю эту часть:

constructor(elem) {
      this._elem = elem;
      elem.onclick = this.onClick.bind(this); // (*)
    }

Чему именно здесь присваивается elem.onclick? this._elem записывается внутри созданной функции в объект this, как объект _elem и затем onclick = this.onClick.bind(this); становится свойством этого объекта?
Или как? Вообще не пойму.

Поможете? Буду очень благодарен за помощь!

Answer 1

[Вадим]

В конструктор передаётся html элемент.
Ему в onClick назначается одноимённый метод класса Menu.
то есть в onClick элемента кладётся вот это:

onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    }

с забинженным контекстом на инстанс класса. Так как по умолчанию в обработчиках событий this равен элементу.
А вот зачем там в _elemкладётся elem это загадка.

Answer 2

[Антон Антон]

Это чтобы у обработчика был контекст этого объекта. Чаще замыканием делают, но тут - так.

elem.onclick = e => this.onClick(e); // замыканием - так. этот код - не совсем эквивалент, но делает то же.

Answer 3

[Антон Горецкий]

elem.onclick это свойство того HTML-элемента, который поступает аргументом в конструктор. И этому свойству присваивается функция onClick, которая всегда будет иметь контекстом этот элемент, независимо от того как она будет вызвана. Делается это для того, чтобы предотвратить потерю контекста при определенных манипуляциях. Например, если присвоить метод класса другой переменной и вызвать метод из этой переменной - будет потеря контекста (если не забиндить контекст как в случае с onClick). И кстати, перебиндить контекст второй раз нельзя.