Как получить this класса внутри его метода?

Question

[Денис Букреев]

Такие дела:

const show = element => {
  element.classList.add('show');
}

class Modal {
  constructor() {
    this.modal = document.get...
  }

  open(endAction) {
    show(this.modal);
    
    endAction();
  }
}

class Slider {
  constructor() {
    this.overlay = document.get...;
  }

  openSlider() {
    show(this.overlay);
    console.log(this); // undefined
  }

  openModal() {
    const modal = new Modal();

    modal.open(this.openSlider);
  }
}

Вот урезанный и облегченный код.

При вызове openSlider() на функцию show() выдает ошибку, на console.log() выдает undefined.

Почему так? Как быть в такой ситуации?

Comments

[Алексей Уколов]

Покажите как вы создаёте объект и работаете с ним.

[lemme]

Все должно работать

[Денис Букреев]

Алексей Уколов: все запутано

создаю объект прямо в начале всех скриптов, сразу после 'use strict'

но тут дело скорее в вызове.
есть еще другой класс - Modal, который создается внутри Slider
и openSlider отправляется в качестве параметра в один из методов Modal

Попробую изобразить кодом кратко

[Денис Букреев]

Алексей Уколов: вот, обновил код
Добавил класс Modal, который создается внутри метода Slider
И один из методов Slider, в котором возникает ошибка, передается в качестве параметра методу Modal

[lemme]

Это единственное место, где у меня возникла ошибка modal.open(() => this.openSlider);

Answer 1

[Faliah]

Контекст this теряется, если ваш метод вызывается не из экземпляра класса, в котором он объявлен. Нужно использовать bind, чтобы привязать функцию к экземпляру.

const show = element => {
  element.classList.add('show');
}

class Modal {
  constructor() {
    this.modal = document.get...
  }

  open(endAction) {
    show(this.modal);
    
    endAction();
  }
}

class Slider {
  constructor() {
    this.overlay = document.get...;
  }

  openSlider() {
    show(this.overlay);
    console.log(this); // Slider
  }

  openModal() {
    const modal = new Modal();

    modal.open(this.openSlider.bind(this));
  }
}

Или с ES6 стрелочной функцией, результат один и тот же:

const show = element => {
  element.classList.add('show');
}

class Modal {
  constructor() {
    this.modal = document.get...
  }

  open(endAction) {
    show(this.modal);
    
    endAction();
  }
}

class Slider {
  constructor() {
    this.overlay = document.get...;
  }

  openSlider() {
    show(this.overlay);
    console.log(this); // Slider
  }

  openModal() {
    const modal = new Modal();

    modal.open(() => this.openSlider());
  }
}

Comments

[Денис Букреев]

с bind проходит, а вот стрелочные функции игнорируются, но без ошибки.

[Faliah]

Денис Букреев: Как понять игнорируются? Вы передаете именно так modal.open(() => this.openSlider()). То есть внутри стрелочной функции вы вызываете this.openSlider(), а не передаете в нее ссылку на объект функции this.openSlider?

[Денис Букреев]

Faliah: она просто не вызывается
все делаю именно так

при этом в другом месте я так же вызываю setTimeout через толстую стрелку - все работает.
значит я где-то еще пролупил что-то

[Денис Букреев]

Faliah: а все, разобрался
я забывал () поставить, писал просто this.openSlider

[Faliah]

Денис Букреев: Хорошо, что все заработало!