Czym jest kontekst w JavaScript?

Kontekst (this) w JavaScript to odwołanie do obiektu, w którym wykonywana jest bieżąca funkcja. Jego wartość jest określana przez sposób wywołania funkcji, a nie przez miejsce jej definicji.

Główne sposoby określania kontekstu:

• Kontekst globalny: Poza funkcjami, w trybie nie-ścisłym, this odnosi się do obiektu globalnego (window w przeglądarce, global w Node.js). W trybie ścisłym this jest undefined.

  // Tryb nie-ścisły (w przeglądarce)
  console.log(this === window); // true
  
  // Tryb ścisły
  "use strict";
  console.log(this === undefined); // true
  

• Metoda obiektu: Jeśli funkcja jest wywoływana jako metoda obiektu (obj.method()), this wewnątrz funkcji odnosi się do tego obiektu (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Wypisze: Hello, John (this odnosi się do user)
  

• Wywołanie funkcji (call, apply, bind): Metody call i apply wywołują funkcję z jawnie określonym kontekstem. bind tworzy nową funkcję z ustalonym kontekstem.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Wypisze: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Wypisze: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Wypisze: Hey, Peter (this = person)
  

• Konstruktor (new): Przy wywołaniu funkcji z operatorem new, tworzony jest nowy pusty obiekt, a this wewnątrz funkcji konstruktora odnosi się do tego nowego obiektu.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Wypisze: John (this wewnątrz Person odnosi się do john)
  

• Funkcje strzałkowe: Funkcje strzałkowe nie mają własnego kontekstu. this wewnątrz funkcji strzałkowej jest pobierane z otaczającego (lexikalnego) zakresu, w którym została utworzona.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this jest pobierane z greet (odnosi się do user)
          };
          innerGreet();
      }
  };
  user.greet(); // Wypisze: Hello, Alice
  

Zrozumienie, jak this jest określane, jest kluczowe dla poprawnej pracy z obiektami, metodami i obsługą zdarzeń w JavaScript.