Co to jest this w JavaScript?

this w JavaScript to słowo kluczowe wskazujące kontekst wykonania funkcji. Jego wartość jest określana w zależności od sposobu wywołania funkcji.

Zazwyczaj this wskazuje na obiekt globalny (w przeglądarce window) w przypadku zwykłego wywołania funkcji, o ile nie jest w trybie ścisłym.

W trybie ścisłym ('use strict') w tym samym scenariuszu this będzie undefined.

Podczas wywoływania metody obiektu, this odnosi się do samego obiektu.

const obj = {
  method: function() {
    console.log(this); // obj
  }
};
obj.method();

Podczas wywoływania konstruktora (new z funkcją), this wskazuje na nowo utworzony egzemplarz obiektu.

function Constructor() {
  console.log(this); // instancja Constructor
}
const instance = new Constructor();

Przy użyciu metod call, apply, bind, this jest jawnie ustawione jako pierwszy argument.

function greet() {
  console.log(`Cześć, ${this.name}!`);
}

const person = { name: 'Ala' };

greet.call(person); // Cześć, Ala!
greet.apply(person); // Cześć, Ala!

const boundGreet = greet.bind(person);
boundGreet(); // Cześć, Ala!

W funkcjach strzałkowych (Arrow Functions) this nie ma własnego kontekstu. jest leksykalnie dziedziczone z tego zakresu, w którym funkcja została zdefiniowana.

const obj2 = {
  name: 'Bob',
  greet: function() {
    const arrowGreet = () => {
      console.log(`Cześć od ${this.name}!`); // this odnosi się do obj2
    };
    arrowGreet();
  }
};
obj2.greet(); // Cześć od Bob!

const obj3 = {
  name: 'Charlie',
  greet: () => {
    console.log(`Cześć od ${this.name}!`); // this odnosi się do window (lub undefined w trybie ścisłym), nie do obj3
  }
};
obj3.greet(); // Cześć od undefined! (lub błąd)

Kontekst this może być nieoczywisty, szczególnie podczas przekazywania callbacków lub operacji asynchronicznych. Zrozumienie reguł this jest kluczowe dla poprawnego działania JavaScript.