Ինչպես փոխել ֆունկցիայի կոնտեքստը JavaScript-ում?

JavaScript-те ֆունկցիայի գործարկման համատեքստը (this արժեքը) կարող է փոխվել մի քանի եղանակով:

1. call(): Կատարում է ֆունկցիան նշված this արժեքով և փոխանցված արգումենտներով, որոնք փոխանցվում են առանձին, ստորակետով բաժանված:

   // function.call(thisArg, arg1, arg2, ...)
   function greet(name) {
     console.log(`Բարև, ${name}! Ես եմ ${this.type}`);
   }
   
   const obj = { type: 'օբյեկտ' };
   
   greet.call(obj, 'Ալիսա'); // Բարև, Ալիսա! Ես եմ օբյեկտ
   

2. apply(): Կատարում է ֆունկցիան նշված this արժեքով և փոխանցված արգումենտներով, որոնք ներկայացված են զանգված կամ զանգվածի նման օբյեկտ:

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

3. bind(): Ստեղծում է նոր ֆունկցիա, որը "կապված" է նշված this արժեքին: Օригинալ ֆունկցիան չի կատարվում անմիջապես:

   // function.bind(thisArg, arg1, arg2, ...)
   const user = { name: 'Բոբ' };
   
   function sayHello() {
     console.log(`Իմ անունը ${this.name}`);
   }
   
   const boundSayHello = sayHello.bind(user);
   
   boundSayHello(); // Իմ անունը Բոբ
   

4. Նետային ֆունկցիաներ (=>): Նետային ֆունկցիաները չունեն սեփական this:ը, նրանք բռնում են this-ը լեքսիկական շրջապատից (այդինքն՝ այն միջավայրից, որտեղ նրանք սահմանվել են):

   class MyClass {
     constructor() {
       this.value = 'класа արժեք';
       // Նետային ֆունկցիան պահում է դասի կոնտեքստը
       this.logValue = () => {
         console.log(this.value);
       };
     }
   }
   
   const instance = new MyClass();
   const method = instance.logValue;
   
   method(); // դասի արժեք (կոնտեքստը պահպանված)
   
   // Համեմատեք սովորական ֆունկցիայի հետ, առանց bind-ի
   class AnotherClass {
       constructor() {
           this.value = 'այլ արժեք';
           this.logValue = function() {
               console.log(this.value); // 'this' կլինի window կամ strict ռեժիմում undefined
           };
       }
   }
   
   const anotherInstance = new AnotherClass();
   const anotherMethod = anotherInstance.logValue;
   
   anotherMethod(); // undefined (կոնտեքստը կորել է)