Do czego służy this w JavaScript?

By /

JavaScript

Słowo kluczowe this w JavaScript odnosi się do obiektu, w kontekście którego jest wywoływana funkcja. Jego wartość jest dynamiczna i zmienia się w zależności od kontekstu wywołania funkcji. Zrozumienie działania this jest kluczowe dla efektywnego programowania w JavaScript, szczególnie w kontekście funkcji, metod obiektów oraz w programowaniu opartym na klasach.

Jak działa this?

Wartość this w funkcji zależy od sposobu, w jaki funkcja została wywołana:

This w kontekście globalnym lub wewnątrz funkcji wywołanej bezpośrednio (nie jako metoda obiektu), this odnosi się do globalnego obiektu (window w przeglądarkach, global w Node.js)

console.log(this); // W przeglądarkach wyświetli globalny obiekt `window`

function showThis() {
    console.log(this);
}
showThis(); // Globalny obiekt window ponownie

This w metodach obiektów, this odnosi się do obiektu, na rzecz którego metoda została wywołana.

let car = {
    brand: "Ford",
    model: "Mustang",
    showDetails: function() {
        console.log(`Marka: ${this.brand}, Model: ${this.model}`);
    }
};

car.showDetails(); // Marka: Ford, Model: Mustang

This w konstruktorach i klasach, this odnosi się do instancji obiektu utworzonej przez konstruktor lub klasę.

function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

let myCar = new Car("Ford", "Mustang");
console.log(myCar.brand); // Ford

Funkcje strzałkowe a this

Funkcje strzałkowe (arrow functions) nie mają własnego this, zamiast tego dziedziczą this z otaczającego kontekstu leksykalnego. Oznacza to, że this wewnątrz funkcji strzałkowej zawsze odnosi się do wartości this z zasięgu, w którym funkcja strzałkowa została zdefiniowana.

let car = {
    brand: "Ford",
    model: "Mustang",
    showDetails: function() {
        setTimeout(() => {
            console.log(`Marka: ${this.brand}, Model: ${this.model}`);
        }, 1000);
    }
};

car.showDetails(); // Marka: Ford, Model: Mustang (po 1 sekundzie)

Podsumowanie

Słowo kluczowe this w JavaScript jest dynamiczne i jego wartość zależy od kontekstu wywołania funkcji. Może odnosić się do globalnego obiektu, obiektu, na rzecz którego została wywołana metoda, instancji obiektu utworzonej przez konstruktor, a w przypadku funkcji strzałkowych – dziedziczy this z otaczającego zakresu leksykalnego. Zrozumienie działania this jest niezbędne do efektywnego wykorzystania obiektów i klas w JavaScript.

Jeżeli chcesz przyśpieszyć swoją naukę chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego koncepcji.

 

 

 

 

Powiązane artykuły

Scroll to Top