Ինչից է կախված `this`-ի գործարկման կոնտեքստի արժեքը JavaScript-ում?

JavaScript- ում this-ի արժեքը կախված է ֆունկցիայի կանչման եղանակից: Հիմնական սցենարները:

1. Գլոբալ կոնտեքստ: Ֆունկցիաներից դուրս, խիստ ռեժիմում ('use strict') this-ը undefined է: Բացառությամբ ռեժիմում՝ գլոբալ օբյեկտը (window բրաուզերում, global Node.js-ում):

2. Օբյեկտի մեթոդի կանչում: this ցույց է տալիս այն օբյեկտին, որի վրա է կանչվում մեթոդը:

   const obj = {
     prop: 'արժեք',
     method: function() {
       // this === obj
       console.log(this.prop);
     }
   };
   obj.method();
   

3. Ընդհանրական ֆունկցիայի կանչում: Խիստ ռեժիմում this-ը undefined է: Բացառությամբ ռեժիմում՝ գլոբալ օբյեկտը:

   function myFunction() {
     // խիստ ռեժիմում this === undefined
     // բաց ռեժիմում this === window (բրաուզերում)
     console.log(this);
   }
   myFunction();
   

4. Կոնստրուկտոր (new): new-ով կանչելիս, this-ը ներսում հղվում է նոր ստեղծվող օբյեկտին:

   function MyClass(name) {
     this.name = name; // this === նոր օբյեկտ
   }
   const instance = new MyClass('տեստ');
   // instance.name === 'տեստ'
   

5. Ապակասելի կապ (call, apply, bind): Այս մեթոդները թույլ են տալիս բացահայտորեն սահմանել this-ի արժեքը:

   • call(thisArg, arg1, arg2, ...): կանչում է ֆունկցիան, this-ը սահմանելով thisArg-ին և փոխանցելով արգումենտները՝ առանձին:
   • apply(thisArg, [argsArray]): կանչում է ֆունկցիան, this-ը սահմանելով thisArg-ին և փոխանցելով արգումենտները որպես զանգված:
   • bind(thisArg): վերադարձնում է նոր ֆունկցիա, որի this-ը մշտապես կապված է:

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Տպում է 42
   

6. Նիշային ֆունկցիաներ (=>): Նիշային ֆունկցիաները սեփական this չունեն: this-ի արժեքը ժառանգվում է լեքսիկ կոնտեքստից, որտեղ այն սահմանվել է:

   const outerObj = {
     name: 'Ելք',
     method: function() {
       const arrowFunc = () => {
         // this այստեղ ժառանգվում է `method`-ից, որը կանչվում է որպես outerObj մեթոդ
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Տպում է 'Ելք'
   
   const anotherArrowFunc = () => {
       // this այստեղ ժառանգվում է գլոբալ կոնտեքստից (կամ `undefined` խիստ ռեժիմում)
       console.log(this);
   };
   anotherArrowFunc();
   

7. DOM- ում իրադարձության հսկիչներ: Շատ դեպքերում, this-ը իրադարձության հսկիչում ցույց է տալիս այն DOM տարրին, որի վրա տեղի է ունեցել իրադարձությունը:

   // Բրաուզերում օրինակ
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Այս մեխանիզմների ըմբռնումը կարևոր է this-ի ճիշտ օգտագործման համար JavaScript-ում: