Как использовать два контекста в методе правильно JS?

Question

[Илья Бондаренко]

Здравствуйте.
Ситуация:
В методе init на кнопку вешаю обработку события. В методе, который обрабатывает событие мне нужен доступ до this объекта в котом объявлены методы, а так же доступ к this объекта кнопки.

Как сейчас решаю проблему:

init() {
    for (let i = 0; i < this.targets.length; i++) {
        this.targets[i].index = i;
        this.targets[i].addEventListener("click", this.animateTab.call(this));
    }
}

animateTab() {
    const context = this;
    return function() {
        // Доступ к <b>this</b> объекта через идентификатор <b>context</b>
        // Доступ к <b>this </b>объекту кнопки через идентификатор <b>this</b>
    }
}

Выглядит как будто такой код переусложнен, много обращений через context. внутри animateTab. Каким образом решить лучше проблему лучше - не придумал. Буду благодарен, если подскажите, спасибо

Answer 1

[Михаил Р.]

Используя стрелочную функцию:

init() {
    this.targets.forEach((target, index) => {
        target.index = index;
        target.addEventListener("click", (event) => this.animateTab(event, this));
    });
}

Используя метод bind():

init() {
    for (let i = 0; i < this.targets.length; i++) {
        this.targets[i].index = i;
        this.targets[i].addEventListener("click", this.animateTab.bind(this));
    }
}

Comments

[Илья Бондаренко]

Спасибо за наглядность. Ответ Алексея Уколова увидел первым, поэтому отметил его решением, чтоб было честно. Спасибо

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

Илья Бондаренко, можно отмечать любое количество решений, это нормально.

[Илья Бондаренко]

Оу сори. Я не знал что так можно))

Answer 2

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

Почему бы не получать кнопку просто через event.target? А this прибить к вашему объекту.