Проблема в передаче контекста this в методах класса JS

Question

    constructor() {
        this.btnLeft = document.querySelector('#back-reviews');
        this.btnRight = document.querySelector('#next-reviews');
        this.card = document.querySelector('.reviews-card');
        this.parentCard = document.querySelector('.reviews-body');
        this.animate = false;
        this.source = null;
        this.currentIndex = 0;
        this.fetchOptions();
        this.addEventBtnLeft();
        this.addEventBtnRight();
    }

    buildCard(newCard) {
        let title = newCard.querySelector('.reviews-card-photo__title')
    }

    clickRight() {
        let card = document.querySelector('.reviews-card');
        let newCard = card.cloneNode(true);
        this.buildCard(newCard);
        let parentCard = document.querySelector('.reviews-body');
        parentCard.insertBefore(newCard, card.nextSibling);
        let cards = document.querySelectorAll('.reviews-card');
        cards[1].classList.add('animate-r-to-c');
        cards[0].classList.add('animate-c-to-l');
        let time = setTimeout(() => {
            cards[0].remove();
            cards[1].classList.remove('animate-r-to-c');
        }, 500);
    }

    clickLeft() {
        let card = document.querySelector('.reviews-card');
        let newCard = card.cloneNode(true);
        newCard.classList.add('test');
        let parentCard = document.querySelector('.reviews-body');
        parentCard.insertBefore(newCard, card);
        let cards = document.querySelectorAll('.reviews-card');
        console.log('aaaa', cards)
        cards[0].classList.add('animate-l-to-c');
        cards[1].classList.add('animate-c-to-r');
        let time = setTimeout(() => {
            cards[1].remove();
            cards[0].classList.remove('animate-l-to-c');
            cards[0].classList.remove('test');
        }, 500);
    }

    addEventBtnLeft() {
        this.btnLeft.addEventListener('click', this.clickLeft);
    }

    addEventBtnRight() {
        this.btnRight.addEventListener('click', this.clickRight);
    }

    async fetchOptions() {
        let response = await fetch('./images/reviews/source.json');
        if (response.ok) { // если HTTP-статус в диапазоне 200-299
            let json = await response.json();
            this.source = json.list;
        } else {
            console.log("Ошибка HTTP: " + response.status);
        }
    }
}



const slider = new Slider();

При попытке обратится к контексту this, или как то декомпозировать метод "clickRight" получаю ошибку. В данном случае

Uncaught TypeError: this.buildCard is not a function
    at HTMLButtonElement.clickRight (slider.js:23:14)

Пытался некоторые переменные типа "newCard" вынести в конструктор и обращатся к ним. тоже ошибка. Почему при передаче метода в this.btnRight.addEventListener('click', this.clickRight); контекст теряется?

score -1 · Answer 1 · answered Nov 27 '23 at 23:58

Проблема потери контекста при передачи метода как колбэка.

Демонстрация проблемы:

 class Slider{   
    constructor() {
         this.a=5;
         this.start()   
    }
    start(){
        this.foo(this.bar)
    }
foo(cb){
    cb()
}
bar(){
    console.log(this)
}

}
const slider = new Slider();

Решение #1

 class Slider{   
    constructor() {
        this.a=5;
         this.start();
    }
    start(){
        this.foo(this.bar.bind(this))
    }
foo(cb){
    cb()
}
bar(){
    console.log(this)
}

}
const slider = new Slider();

Решение #2

class Slider{   
    constructor() {
      this.a=5;
      this.start()   
    }
    start(){
      const self = this
      this.foo(function(){
          /// some code
          self.bar()
      })
    }
foo(cb){
    cb()
}
bar(){
    console.log(this)
}

}
const slider = new Slider();

Решение #3

    class Slider{   
        constructor() {
          this.a=5;
          this.start()   
        }
        start(){
          this.foo(()=>{
            this.bar() ///Обязательно стрелочная функция, иначе опять же потеря контекста
          })
        }
    foo(cb){
        cb()
    }
    bar(){
        console.log(this)
    }
}



const slider = new Slider();</code></pre>

Проблема в передаче контекста this в методах класса JS

1 Answers1