Ի՞նչ է կոնտեքստը ֆունկցիայում։

Կոնտեքստը (this) JavaScript-ում ֆունկցիայում որոշվում է այն կերպ, ինչպես է ֆունկցիան կանչվել, ոչ թե այն վայրով, որտեղ այն հայտարարվել է։ Այն ցույց է տալիս օբյեկտին, որի վրա պատկանում է ֆունկցիան կամ որը նա կանչում է։

Կոնտեքստի որոշման եղանակները՝

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

   // Բրաուզերում
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Օբյեկտի կոնտեքստ (մեթոդ): Եթե ֆունկցիան կանչվում է որպես օբյեկտի մեթոդ (obj.method()), ապա this-ը ֆունկցիայի ներսում կկապվի այդ օբյեկտին։

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Բարև, ես եմ ${this.name}`);
     }
   };
   
   user.greet(); // Բարև, ես եմ Alice
   

3. Կոնստրուկտորային կոնտեքստ: Երբ ֆունկցիան կանչվում է new-ով (new MyClass()), ստեղծվում է նոր օբյեկտ, և this-ը այդ կոնստրուկտորում ցույց է տալիս այդ նոր օբյեկտին։

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

4. Հստակ նշում կոնտեքստի: call, apply և bind մեթոդները թույլ են տալիս հստակ նշել this-ի արժեքը ֆունկցիայի կանչման ժամանակ։

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

   function displayInfo(age) {
     console.log(`${this.name} է ${age} տարեկան`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie է 30 տարեկան
   displayInfo.apply(person, [35]); // Charlie է 35 տարեկան
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie է 40 տարեկան
   

5. Նետային ֆունկցիաներ: Նետային ֆունկցիաները սեփական this-ը չունեն։ Դրանք ժառանգում են this-ը լեքսիկոնային շրջապատից (որտեղ դրանք սահմանվել են):

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Բարև նետից, ${this.name}`);
       };
       innerArrow(); // `this` այստեղ - anotherUser, ժառանգված է sayHello-ից
     },
     sayHelloBad: () => { // վատ պրակտիկա օբյեկտի մեթոդների համար
         console.log(`Բարև նետից, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Բարև նետից, David
   
   // Բրաուզերում, strict ռեժիմից դուրս
   anotherUser.sayHelloBad(); // Բարև նետից, undefined (this - window)
   

Հասկանալ կոնտեքստը կարևոր է օբյեկտների, մեթոդների և իրադարձությունների handlers-ների ճիշտ աշխատանքի համար JavaScript-ում։