JavaScript this – jak i kiedy używać?

Ewa Klimowicz

21 marca, 2024

3 min

• Specjalizacja
• JavaScript

Ostatnia aktualizacja 21 marca, 2024

W języku JavaScript słowo kluczowe this wskazuje na obiekt, który stanowi kontekst wykonania funkcji. Jednakże jego zachowanie może być mylące, zwłaszcza dla początkujących programistów. W tym artykule przyjrzymy się bliżej, jak działa this w różnych kontekstach oraz jak można to słowo efektywnie wykorzystać w swoim kodzie.

Czym jest this w kontekście języka JavaScript?

Słowo kluczowe this w JavaScript odnosi się do obiektu, w kontekście którego wywołano funkcję. Może ono wskazywać na różne obiekty w zależności od miejsca i sposobów wywołania funkcji.

W jakich sytuacjach stosuje się this w języku JavaScript?

• Tworzenie obiektów za pomocą konstruktorów. this pozwala na odniesienie się do instancji tworzonego obiektu, umożliwiając przypisywanie właściwości i metod specyficznych dla tej instancji.
• Metody obiektów. W metodach obiektów, this odnosi się do obiektu, na którym metoda została wywołana. Pozwala to na interakcję z innymi właściwościami i metodami tego obiektu.
• Łańcuchowanie metod. Użycie this w metodach obiektu pozwala na ich łańcuchowanie poprzez zwracanie samego siebie (return this;), co zwiększa czytelność i efektywność kodu.
• Obsługa zdarzeń w przeglądarkach: W funkcjach obsługujących zdarzenia, this może odnosić się do elementu DOM, na którym zdarzenie zostało wywołane, umożliwiając łatwą manipulację elementem.

Globalny kontekst

W tym kontekście, czyli poza jakąkolwiek funkcją, this odnosi się do globalnego obiektu. W przeglądarkach internetowych jest to obiekt window, a w środowisku Node.js – global.

console.log(this === window); // W przeglądarce: true

Kontekst funkcji

W standardowej funkcji this określa się poprzez sposób wywołania tej funkcji. Jeśli funkcja jest wywoływana jako metoda obiektu, this wskazuje na ten obiekt.

const person = {
    name: 'Jan',
    greet: function() {
        console.log('Cześć, jestem ' + this.name);
    }
};

person.greet(); // Wyświetla: "Cześć, jestem Jan"

W przypadku użycia funkcji strzałkowej, this jest powiązana leksykalnie. Oznacza to, że dziedziczy kontekst z otaczającego zakresu.

const person = {
    name: 'Jan',
    greet: () => {
        console.log('Cześć, jestem ' + this.name);
    }
};

person.greet(); // W przeglądarce wyświetli: "Cześć, jestem ", ponieważ `this` wskazuje na globalny obiekt window

Konstruktor i new – this w JavaScript wskazuje na nowy obiekt

Gdy funkcja konstruktora jest wywoływana z użyciem new, this wskazuje na nowo utworzony obiekt.

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log('Cześć, jestem ' + this.name);
    };
}

const jan = new Person('Jan');
jan.greet(); // Wyświetla: "Cześć, jestem Jan"

W tym kodzie definiuje się funkcję konstruktora Person, która inicjalizuje nowe obiekty z własnością name i metodą greet.

Przy użyciu słowa kluczowego new tworzony jest nowy obiekt jan na podstawie konstruktora Person, przy czym własność name ustawiona jest na “Jan”. Następnie wywoływana jest metoda greet obiektu jan, która wyświetla powitanie z użyciem imienia przechowywanego w właściwości name tego obiektu.

Explicit binding

Można jawnie ustawić wartość this używając metod call(), apply() lub bind().

function greet() {
    console.log('Cześć, jestem ' + this.name);
}

const person = {name: 'Jan'};
greet.call(person); // Wyświetla: "Cześć, jestem Jan"

Możliwe problemy z wykorzystaniem this

• Zachowanie w funkcjach strzałkowych. this w funkcjach strzałkowych nie jest powiązane z kontekstem wywołania, ale z kontekstem leksykalnym, co może prowadzić do nieoczekiwanych wyników, jeśli nie jest to zrozumiałe dla programisty.
• Utrata kontekstu. W callbackach lub przy przekazywaniu metod obiektu jako referencji, this może nie wskazywać na oczekiwany obiekt. Może to prowadzić do błędów wykonania.
• Nadużywanie lub błędne użycie. Nieprawidłowe lub nadmierne używanie this może prowadzić do skomplikowania kodu i utrudnić jego zrozumienie i utrzymanie, zwłaszcza w większych projektach.
• Jawne i niejawne zmiany kontekstu. Użycie metod call, apply lub bind dla zmiany kontekstu this może wprowadzać zamieszanie co do tego, co jest aktualnie kontekstem wykonania, jeśli nie jest stosowane konsekwentnie i zrozumiale.

Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.

Czytaj także:

Var, let i const. Ewolucja deklaracji zmiennych w JavaScript

Praktyczne zastosowania metody forEach w JavaScript

Jak napisać list motywacyjny po angielsku