Čo je to kontext vo funkcii?

Kontext (this) vo funkcii v JavaScripte je definovaný podľa spôsobu, akým bola funkcia volaná, nie podľa toho, kde bola deklarovaná. Ukazuje na objekt, ktorému funkcia patrí alebo ktorý ju volá.

Spôsoby určenia kontextu:

1. Globálny kontext: mimo funkcií, alebo ak je funkcia volaná bez explicitného objektu (this bude odkazovať na globálny objekt window v prehliadači, global v Node.js, alebo undefined v režime strict).

   // V prehliadači
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Kontext objektu (metóda): Ak je funkcia volaná ako metóda objektu (obj.method()), this vo vnútri funkcie bude odkazovať na tento objekt.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Ahoj, volám sa ${this.name}`);
     }
   };
   
   user.greet(); // Ahoj, volám sa Alice
   

3. Kontext konštruktora: Pri volaní funkcie s kľúčovým slovom new (new MyClass()), sa vytvorí nový objekt, a this vnútri konštruktora odkazuje na tento nový objekt.

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

4. Explicitné určenie kontextu: Metódy call, apply a bind umožňujú explicitne nastaviť hodnotu this pri volaní funkcie.

   • call(thisArg, arg1, arg2, ...): Volá funkciu s daným this a argumentmi, odovzdanými jednotlivé.
   • apply(thisArg, [argsArray]): Volá funkciu s daným this a argumentmi v podobe poľa.
   • bind(thisArg, arg1, arg2, ...): Vráti novú funkciu, v ktorej je this pevne nastavené na danú hodnotu.

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

5. Šípové funkcie: Šípové funkcie nemajú vlastný this. Dedičia this z lexikálneho prostredia (oblasti viditeľnosti, kde boli definované).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Ahoj zo šipky, ${this.name}`);
       };
       innerArrow(); // `this` tu je anotherUser, dedí sa od sayHello
     },
     sayHelloBad: () => { // zlá prax pre metódy objektu
         console.log(`Ahoj zo šipky, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Ahoj zo šipky, David
   
   // V prehliadači, mimo strict režimu
   anotherUser.sayHelloBad(); // Ahoj zo šipky, undefined (this je window)
   

Porozumenie kontextu je kľúčové pre správnu prácu s objektmi, metódami a udalosťami v JavaScripte.