Jak zmienić kontekst funkcji w JavaScript?

W JavaScript, kontekst wykonania funkcji (this) można zmienić na kilka sposobów:

1. call(): Uruchamia funkcję z określoną wartością this i argumentami przekazanymi oddzielnie przecinkami.

   // function.call(thisArg, arg1, arg2, ...)
   function greet(name) {
     console.log(`Cześć, ${name}! Jestem ${this.type}`);
   }
   
   const obj = { type: 'obiekt' };
   
   greet.call(obj, 'Alicja'); // Cześć, Alicja! Jestem obiekt
   

2. apply(): Uruchamia funkcję z określoną wartością this i argumentami przekazanymi jako tablica lub obiekt podobny do tablicy.

   // function.apply(thisArg, [argsArray])
   function sum(a, b) {
     console.log(`${this.name}: ${a + b}`);
   }
   
   const context = { name: 'Kalkulator' };
   const numbers = [5, 10];
   
   sum.apply(context, numbers); // Kalkulator: 15
   

3. bind(): Tworzy nową funkcję "związaną" z określoną wartością this. Oryginalna funkcja nie jest wywoływana od razu.

   // function.bind(thisArg, arg1, arg2, ...)
   const user = { name: 'Bob' };
   
   function sayHello() {
     console.log(`Nazywam się ${this.name}`);
   }
   
   const boundSayHello = sayHello.bind(user);
   
   boundSayHello(); // Nazywam się Bob
   

4. Funkcje strzałkowe (=>): Funkcje strzałkowe nie mają własnego kontekstu this. przechwytują this z otaczającego środowiska (z zakresu leksykalnego, w którym zostały zdefiniowane).

   class MyClass {
     constructor() {
       this.value = 'wartość klasy';
       // Funkcja strzałkowa zachowuje kontekst klasy
       this.logValue = () => {
         console.log(this.value);
       };
     }
   }
   
   const instance = new MyClass();
   const method = instance.logValue;
   
   method(); // wartość klasy (kontekst jest zachowany)
   
   // Porównanie z normalną funkcją bez bind
   class InnaKlasa {
       constructor() {
           this.value = 'inna wartość';
           this.logValue = function() {
               console.log(this.value); // 'this' będzie window lub undefined w trybie strict
           };
       }
   }
   
   const innaInstancja = new InnaKlasa();
   const innaMetoda = innaInstancja.logValue;
   
   innaMetoda(); // undefined (kontekst zostaje utracony przy wywołaniu jako oddzielna funkcja)