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

Question

[Николай Антонов]

Я пробую вызвать метод openPopup() в обработчике клика в другом методе. Обязательно ли создавать переменную self? Область видимости this меняется в обработчике. Какое лучшее решение будет?

class DropdownButtonGroup {

            constructor(obj) {
                // code ...
            }

            setListeners() {

                let self = this; // (1)
                params.toggleButton.click(function(){
                    if(params.wrapper.hasClass('collapsed')) {
                        self.openPopup();  //(2)
                    } else {
                        self.openPopup();
                    }

                });
              }
     
              openPopup() {// code ...}

P.S. Недоделанное какое то ООП в js на мой взгляд.

Answer 1

[_ _]

Нормальное ООП - никто не говорил, что оно избавит вас от необходимости понимания контекста вызова.

params.toggleButton.click(() => {
  if(params.wrapper.hasClass('collapsed')) {
    this.openPopup();  //(2)
  } else {
    this.openPopup();
  }
});

Comments

[Николай Антонов]

В обработчиках события только через self вызвать обьект?

[_ _]

Николай Антонов: анонимная функция через () => {} сохраняет контекст, в котором она была объявлена. function() {} вызывается с контекстом вызывающей функции.
Контекст можно "прибить гвоздями" с помощью function() {}.bind(this)

[Aves]

Александр Марченко: в ответе надо self на this изменить.

[_ _]

Aves: Да, опечатался. Спасибо

[Николай Антонов]

А как тогда вызвать this.openPopup() из setTimeout?

[sanex3339]

Ну вы голову то включите хоть: setTimeout(() => { this.openPopup() }, 1000);

[Николай Антонов]

Извините, спросил и перед тем не проверил. Спасибо большое!