Object Oriented JavaScript - pytanie

Question

Hej.

Czy możecie wyjaśnić mi dlaczego na załączonym screenie this.menuElements działają bez problemu wewnątrz jednej funkcji w ramach klasy, ale już nie działają w ramach innej funkcji - umieszczonej w tej samej klasie?

 

class Tabs {
    constructor(selector) {
        this.menuElements = document.querySelectorAll(selector);

        if ( !this.menuElements ) {
            return;
        }

        this.menuElementsClick();
    }

    menuElementsClick() {
        for (var i = 0; i < this.menuElements.length; i++) {
            this.menuElements[i].addEventListener("click", this.change, false);
        }

        
    }

    change(e) {

        for (var i = 0; i < this.menuElements.length; i++) {
            this.menuElements[i].classList.remove('active');
            const id = this.menuElements[i].getAttribute('data-tab');
            document.getElementById(id).classList.remove('active');
        }


        e.target.classList.add('active');
        const id = e.currentTarget.getAttribute('data-tab');
        document.getElementById(id).classList.add('active');
    }
}

export default Tabs;

Comments

Wstaw kod przy pomocy odpowiedniej funkcji edytora – będzie zdecydowanie łatwiej zauważyć, co się dzieje, niż na screenie.

Answer 1

Domyślam się, że this jest gubiony wewnątrz metody change? this domyślnie jest ustawiane w momencie wywołania funkcji. Do event listenera przekazujesz this.change i w tym samym momencie kontekst jest gubiony, a już sam listener woła tą funkcję jako samo change (bez kontekstu, czyli domyślnie window lub undefined w zależności czy jest to strict mode).

W tym artykule jest to dobrze wytłumaczone https://javascript.info/reference-type

Możesz to naprawić poprzez:

• przekazanie arrow function: (event) => this.change(event)
• zbindowanie funkcji: this.change.bind(this)

Answer 2

Bo w chwili, gdy change() jest wywoływane jako event listener, to jego this jest zmienione (na element, na którym doszło do zdarzenia).

Są dwa rozwiązania:

1. arrow function,
2. Function.prototype.bind().

Arrow function pozwala na zachowanie kontekstu this, więc wystarczy otoczyć event listener w taką funkcję:

element.addEventListener( 'click', ( event ) => {
    this.change( event );
} );

Z kolei bind() pozwala stworzyć kopię danej funkcji, która ma na stałe przypisany konkretny kontekst, stąd też można to wykorzystać:

element.addEventListener( 'click', this.change.bind( this ) );

Pierwsze rozwiązanie jest IMO ciut ładniejsze + nie tworzymy dodatkowej kopii metody change().

Comments

Hmm, czyli w pierwszym przypadku musiałbym wywoływać całą funkcję jako callback event listenera? Nie ma jakiegoś syntaxu, który pozwoliłby użyć change jako osobna metoda dla tej klasy, ale z arrow function?

Jeśli odpowiedź na powyższe brzmi - nie, to zostaje mi bind tylko, prawda?

Answer 3

Dzięki Panowie - wszystko działa jak należy - tak jak pisaliście :)