Kā mainīt funkcijas kontekstu JavaScript?

JavaScript funkcijas izpildes konteksts (this vērtība) var tikt mainīts vairākos veidos:

1. call(): Izpilda funkciju ar norādītu this vērtību un argumentiem, kas tiek nodoti atsevišķi, atdalīti ar komatu.

   // function.call(thisArg, arg1, arg2, ...)
   function greet(name) {
     console.log(`Sveiki, ${name}! Esmu ${this.type}`);
   }
   
   const obj = { type: 'objekts' };
   
   greet.call(obj, 'Alise'); // Sveiki, Alise! Esmu objekts
   

2. apply(): Izpilda funkciju ar norādītu this vērtību un argumentiem, kas tiek nodoti kā masīvs vai līdzīgs masīvam objekts.

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

3. bind(): Izveido jaunu funkciju, kas ir "sasaistīta" ar norādītu this vērtību. Oriģinālā funkcija netiek izpildīta uzreiz.

   // function.bind(thisArg, arg1, arg2, ...)
   const user = { name: 'Bobs' };
   
   function sayHello() {
     console.log(`Mana vārds ir ${this.name}`);
   }
   
   const boundSayHello = sayHello.bind(user);
   
   boundSayHello(); // Mana vārds ir Bobs
   

4. Līnijas funkcijas (=>): Tās nav ar savu this. Tās aizķer this no leksiskās vides (no parastās vecāku skopas, kur tās tika definētas).

   class MyClass {
     constructor() {
       this.value = 'klases vērtība';
       // Līnijas funkcija saglabā klases kontekstu
       this.logValue = () => {
         console.log(this.value);
       };
     }
   }
   
   const instance = new MyClass();
   const method = instance.logValue;
   
   method(); // klases vērtība (konteksts saglabāts)
   
   // Salīdziniet ar parastu funkciju bez bind
   class AnotherClass {
       constructor() {
           this.value = 'cita vērtība';
           this.logValue = function() {
               console.log(this.value); // 'this' būs window vai undefined stingrā režīmā
           };
       }
   }
   
   const anotherInstance = new AnotherClass();
   const anotherMethod = anotherInstance.logValue;
   
   anotherMethod(); // undefined (konteksts zaudēts)