Na čo závisí hodnota kontextu vykonávania `this` v JavaScripte?

Hodnota this v JavaScripte závisí od spôsobu volania funkcie. Hlavné scenáre:

1. Globálny kontext: mimo funkcií, v režime prísnosti ('use strict') je this undefined. Bez režimu prísnosti — globálny objekt (window v prehliadači, global v Node.js).

2. Volanie metódy objektu: this odkazuje na objekt, ktorému patrí volaná metóda.

   const obj = {
     prop: 'hodnota',
     method: function() {
       // this === obj
       console.log(this.prop);
     }
   };
   obj.method();
   

3. Bežné volanie funkcie: V režime prísnosti je this undefined. Bez režimu prísnosti — globálny objekt.

   function myFunction() {
     // v režime prísnosti this === undefined
     // bez režimu prísnosti this === window (v prehliadači)
     console.log(this);
   }
   myFunction();
   

4. Konstruktor (new): Pri použití new s konštrukčnou funkciou, this vo vnútri funkcie odkazuje na nový vytváraný objekt.

   function MyClass(name) {
     this.name = name; // this === nový objekt
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Explicitné viazanie (call, apply, bind): Tieto metódy umožňujú explicitne nastaviť hodnotu this pre funkciu.

   • call(thisArg, arg1, arg2, ...): volá funkciu, nastavujúc this na thisArg a argumenty zvlášť.
   • apply(thisArg, [argsArray]): volá funkciu, nastavujúc this na thisArg a argumenty ako pole.
   • bind(thisArg): vráti novú funkciu s pevne viazanou hodnotou this.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Vypíše 42
   

6. Šípové funkcie (=>): Šípové funkcie nemajú vlastné this. Hodnota this v šípovej funkcii dedí z lexikálneho kontextu, v ktorom bola definovaná.

   const outerObj = {
     name: 'Vonkajší',
     method: function() {
       const arrowFunc = () => {
         // this tu dedí od `method`, ktorý je volaný ako metóda outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Vypíše 'Vonkajší'
   
   const anotherArrowFunc = () => {
       // this tu dedí od globálneho kontextu (alebo undefined v režime prísnosti)
       console.log(this);
   };
   anotherArrowFunc();
   

7. Obsluhovače udalostí v DOM: Vo väčšine prípadov, this v obsluhovači udalosti odkazuje na element DOM, na ktorom sa udalosť stala.

   // Príklad v prehliadači
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Pochopenie týchto mechanizmov je kľúčové pre správne používanie this v JavaScripte.