Kas ir konteksts funkcijā?

JavaScript funkcijā (this) konteksts tiek definēts pēc tā, kā funkcija tika izsaukta, nevis pēc tās deklarēšanas vietas. Tas norāda uz objektu, kam funkcija pieder vai kuru tā izsauc.

Konteksta noteikšanas veidi:

1. Globālais konteksts: ārpus funkcijām vai ja funkcija tiek izsaukta bez skaidra objekta (this būs globālais objekts window pārlūkprogrammā, global Node.js, vai undefined strict režīmā).

   // Pārlūkprogrammā
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Objekta konteksts (metode): Ja funkcija tiek izsaukta kā objekta metode (obj.method()), this funkcijas iekšienē norāda uz šo objektu.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Sveiki, esmu ${this.name}`);
     }
   };
   
   user.greet(); // Sveiki, esmu Alice
   

3. Konstruktora konteksts: Ja funkcija tiek izsaukta ar vārdu new (new MyClass()), tiek izveidots jauns objekts, un this konstruktora iekšienē norāda uz šo jauno objektu.

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

4. Īpašs konteksta noteikšanas veids: Metodes call, apply un bind ļauj tieši noteikt this vērtību funkcijas izsaukšanas laikā.

   • call(thisArg, arg1, arg2, ...): Izsauc funkciju ar norādītu this un argumentiem, kas nodoti atsevišķi.
   • apply(thisArg, [argsArray]): Izsauc funkciju ar norādītu this un argumentiem, kas nodoti kā masīvs.
   • bind(thisArg, arg1, arg2, ...): Atgriež jaunu funkciju, kuras this ir fiksēts uz norādīto vērtību.

   function displayInfo(age) {
     console.log(`${this.name} ir ${age} gadi.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie ir 30 gadi.
   displayInfo.apply(person, [35]); // Charlie ir 35 gadi.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie ir 40 gadi.
   

5. Līniskās funkcijas: Līniskās funkcijas nav savas this. Tās manto this no leksikālās vides (no vietas, kur tās tika definētas).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Sveiki no bultfunkcijas, ${this.name}`);
       };
       innerArrow(); // `this` šeit ir anotherUser, manto no sayHello
     },
     sayHelloBad: () => { // slikta prakse objektu metožu gadījumā
         console.log(`Sveiki no bultfunkcijas, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Sveiki no bultfunkcijas, David
   
   // Pārlūkprogrammā, ārpus strict režīma
   anotherUser.sayHelloBad(); // Sveiki no bultfunkcijas, undefined (this - window)
   

Konteksta izpratne ir ļoti svarīga, lai pareizi darbotos ar objektiem, metodēm un notikumu apstrādātājiem JavaScript.