31. Czym jest słowo kluczowe 'this' w JavaScript i jak działa w różnych kontekstach?

Zrozumienie słowa kluczowego 'this' w JavaScript

W JavaScript, słowo kluczowe this jest dynamicznym odniesieniem, które odnosi się do kontekstu, z którego wywoływana jest funkcja. Jego wartość jest określana w czasie wykonania i może się zmieniać w zależności od rodzaju wywołania.

Kontekst Globalny

Gdy this jest używane w globalnym kontekście wykonania (poza jakąkolwiek funkcją), odnosi się do obiektu globalnego. W przeglądarkach jest to zazwyczaj obiekt window:

console.log(this); // Wyświetla: Window {...}

Kontekst Funkcji

W zwykłej funkcji this odnosi się do obiektu globalnego, jeśli funkcja jest wywoływana bez określonego kontekstu:

function showThis() {
  console.log(this);
}
showThis(); // Wyświetla: Window {...}

Kontekst Metody

Gdy this jest używane wewnątrz metody obiektu, odnosi się do obiektu wywołującego metodę:

const obj = {
  name: 'Przykład',
  showName: function() {
    console.log(this.name);
  }
};
obj.showName(); // Wyświetla: 'Przykład'

Kontekst Konstruktora

W funkcji konstruktora this odnosi się do nowo utworzonej instancji obiektu:

function Person(name) {
  this.name = name;
}
const person1 = new Person('Alicja');
console.log(person1.name); // Wyświetla: 'Alicja'

Funkcje Strzałkowe

Funkcje strzałkowe są inne, ponieważ nie mają własnego this. Zamiast tego, this jest dziedziczone leksykalnie z zewnętrznej funkcji, w której funkcja strzałkowa jest zdefiniowana:

const obj = {
  name: 'Przykład',
  showName: () => {
    console.log(this.name);
  }
};
obj.showName(); // Wyświetla: undefined (zakładając, że globalne `this.name` nie istnieje)

Wiązanie this

JavaScript zapewnia metody takie jak call(), apply() i bind(), aby jawnie ustawić wartość this:

function greet() {
  console.log('Cześć, ' + this.name);
}
const context = { name: 'Alicja' };
greet.call(context); // Wyświetla: 'Cześć, Alicja'

Podsumowanie

Zrozumienie, jak this działa w różnych kontekstach, jest kluczowe dla opanowania JavaScript, ponieważ wpływa na działanie funkcji i metod.