Czym jest słowo kluczowe 'this'?

this jest słowem kluczowym w JavaScript, które odnosi się do obiektu w kontekście, w którym wykonywany jest bieżący kod. Jego wartość jest określana przez sposób wywołania funkcji.

Główne sposoby definiowania this:

• Kontekst globalny: Poza funkcją, this odnosi się do obiektu globalnego (window w przeglądarce, global w Node.js).
• Normalne wywołanie funkcji: W trybie nie-ścisłym (strict mode), this również odnosi się do obiektu globalnego (lub undefined, jeśli funkcja jest wywoływana jako metoda obiektu, ale ten obiekt jest null lub undefined). W trybie ścisłym, this jest równe undefined.
• Metoda obiektu: Jeśli funkcja jest wywoływana jako metoda obiektu (czyli przez operator kropki .), this odnosi się do obiektu, który posiada tę metodę.
• Konstruktor: Przy użyciu operatora new, this odnosi się do nowo tworzonej instancji obiektu.
• Metody call(), apply(), bind(): Te metody pozwalają jawnie ustawić wartość this podczas wywołania funkcji. bind() zwraca nową funkcję z przypiętym this, podczas gdy call() i apply() wywołują funkcję z określonym this.
• Funkcje strzałkowe: Funkcje strzałkowe nie mają własnego this. this w funkcji strzałkowej jest dziedziczone leksykalnie z otaczającego zakresu, w którym została zdefiniowana.

Przykłady:

// Kontekst globalny
console.log(this === window); // true (w przeglądarce)

// Normalne wywołanie funkcji
function myFunction() {
  console.log(this);
}
myFunction(); // window (w trybie nie-ścisłym)

// Metoda obiektu
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Konstruktor
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // obiekt instancji

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Funkcja strzałkowa
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (jeśli zdefiniowana w kontekście globalnym)

Zrozumienie, jak this jest określane w różnych kontekstach, jest kluczowe dla pisania poprawnego kodu JavaScript.