Czym jest kontekst w funkcji?

Kontekst (this) w funkcji JavaScript jest określany przez sposób wywołania funkcji, a nie przez miejsce jej deklaracji. Wskazuje on na obiekt, do którego funkcja należy lub który ją wywołuje.

Sposoby określenia kontekstu:

1. Kontekst globalny: Poza funkcjami lub jeśli funkcja jest wywoływana bez jawnego obiektu (this będzie równe obiektowi globalnemu window w przeglądarce, global w Node.js, lub undefined w trybie strict).

   // W przeglądarce
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

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

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Cześć, nazywam się ${this.name}`);
     }
   };
   
   user.greet(); // Cześć, nazywam się Alice
   

3. Kontekst konstruktora: Przy wywołaniu funkcji słowem kluczowym new (new MyClass()), tworzony jest nowy obiekt, a this w konstruktorze odnosi się do tego nowego obiektu.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Wyraźne ustawienie kontekstu: Metody call, apply i bind pozwalają jawnie ustawić wartość this podczas wywołania funkcji.

   • call(thisArg, arg1, arg2, ...): Wywołuje funkcję z this ustawionym na thisArg i argumentami przekazanymi pojedynczo.
   • apply(thisArg, [argsArray]): Wywołuje funkcję z this ustawionym na thisArg i argumentami w formie tablicy.
   • bind(thisArg, arg1, arg2, ...): Zwraca nową funkcję, w której this jest ustalony na podaną wartość.

   function displayInfo(age) {
     console.log(`${this.name} ma ${age} lat.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie ma 30 lat.
   displayInfo.apply(person, [35]); // Charlie ma 35 lat.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie ma 40 lat.
   

5. Funkcje strzałkowe: Funkcje strzałkowe nie mają własnego this. Dziedziczą this z otoczenia leksykalnego, w którym zostały zdefiniowane.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Cześć z arrow, ${this.name}`);
       };
       innerArrow(); // `this` tutaj to anotherUser, odziedziczone po sayHello
     },
     sayHelloBad: () => { // zła praktyka dla metod obiektów
         console.log(`Cześć z arrow, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Cześć z arrow, David
   
   // W przeglądarce, poza trybem strict
   anotherUser.sayHelloBad(); // Cześć z arrow, undefined (`this` - window)
   

Zrozumienie kontekstu jest kluczowe dla poprawnej pracy z obiektami, metodami i obsługą zdarzeń w JavaScript.