Słowo kluczowe - this
Słowo kluczowe this
w JavaScript jest jednym z najbardziej subtelnych i często źle rozumianych aspektów języka. W kontekście obiektów, this
odnosi się do obiektu, w kontekście którego została wywołana funkcja (metoda). Jednak to, co dokładnie this
reprezentuje, może się zmieniać w zależności od sposobu, w jaki funkcja jest wywoływana.
Kontekst wywołania a this
▶️ Przykład Standardowego Wywołania
Rozważmy prosty obiekt i metodę w JavaScript:
let obiekt = {
nazwa: 'Przykładowy Obiekt',
pokazNazwe: function () {
return this.nazwa;
}
};
console.log(obiekt.pokazNazwe()); // "Przykładowy Obiekt"
W tym przypadku, this
w pokazNazwe
odnosi się do obiektu obiekt
, ponieważ metoda została wywołana w kontekście tego obiektu.
▶️ Funkcje strzałkowe a this
Funkcje strzałkowe (omawiane już wcześniej arrow functions
) mają inny sposób wiązania this
. Są one związane z kontekstem, w którym zostały utworzone, a nie z kontekstem wywołania.
let obiekt = {
nazwa: 'Przykładowy Obiekt',
pokazNazwe: () => this.nazwa // funkcja strzałkowa
};
console.log(obiekt.pokazNazwe()); // undefined
W tym przykładzie, this
nie odnosi się do obiekt
, ponieważ funkcja strzałkowa nie tworzy własnego kontekstu this
.
Zmiana kontekstu this
▶️ Użycie call
i apply
Metody call
i apply
pozwalają zmienić kontekst this
w funkcji:
function pokazNazwe() {
return this.nazwa;
}
let obiekt1 = { nazwa: 'Obiekt 1' };
let obiekt2 = { nazwa: 'Obiekt 2' };
console.log(pokazNazwe.call(obiekt1)); // "Obiekt 1"
console.log(pokazNazwe.apply(obiekt2)); // "Obiekt 2"
▶️ Użycie bind
Metoda bind
tworzy nową funkcję z ustalonym kontekstem this
.
let obiekt = { nazwa: 'Stały Obiekt' };
let pokazNazwe = function () {
return this.nazwa;
}.bind(obiekt);
console.log(pokazNazwe()); // "Stały Obiekt"
Znaczenie this
w konstruktorach
W konstruktorach, this
odnosi się do nowo utworzonego obiektu.
function Osoba(imie) {
this.imie = imie;
}
let osoba = new Osoba('Jan');
console.log(osoba.imie); // "Jan"
Zrozumienie działania this
w różnych kontekstach pozwala na elastyczne manipulowanie kontekstem i zwiększa możliwości reużywalności kodu. Pamiętaj, że kontekst this
może być zmienny i zależny od sposobu wywołania funkcji, co będzie wymagało od Ciebie szczególnej uwagi 😉.