Od čega zavisi vrednost konteksta izvršenja `this` u JavaScript-u?

Vrednost this u JavaScript-u zavisi od načina pozivanja funkcije. Glavni scenariji:

1. Globalni kontekst: Van funkcija, u režimu stroge ('use strict') this je undefined. Bez režima stroge — globalni objekat (window u pretraživaču, global u Node.js).

2. Poziv metode objekta: this ukazuje na objekat kojem pripada pozvana metoda.

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

3. Običan poziv funkcije: U režimu stroge this je undefined. Bez režima stroge — globalni objekat.

   function myFunction() {
     // u režimu stroge this === undefined
     // bez režima stroge this === window (u pretraživaču)
     console.log(this);
   }
   myFunction();
   

4. Konstruktor (new): Pri korišćenju new sa konstruktor funkcijom, this unutar funkcije ukazuje na novi objekat koji se kreira.

   function MyClass(name) {
     this.name = name; // this === novi objekat
   }
   const instance = new MyClass('test');
   // instance.name === 'test'
   

5. Jasno vezivanje (call, apply, bind): Ove metode omogućavaju eksplicitno postavljanje vrednosti this za funkciju.

   • call(thisArg, arg1, arg2, ...): poziva funkciju, postavljajući this na thisArg i argumente pojedinačno.
   • apply(thisArg, [argsArray]): poziva funkciju, postavljajući this na thisArg i argumente kao niz.
   • bind(thisArg): vraća novu funkciju sa trajno vezanim this.

   const anotherObj = { value: 42 };
   function showValue() {
     console.log(this.value);
   }
   showValue.call(anotherObj); // Ispisuje 42
   

6. Streličaste funkcije (=>): Streličaste funkcije nemaju sopstveni this. Vrednost this unutar streličaste funkcije nasledjuje se iz leksičkog konteksta u kojem je definisana.

   const outerObj = {
     name: 'Spoljašnji',
     method: function() {
       const arrowFunc = () => {
         // this ovde nasledjuje od method, koji se poziva kao metoda outerObj
         console.log(this.name);
       };
       arrowFunc();
     }
   };
   outerObj.method(); // Ispisuje 'Spoljašnji'
   
   const anotherArrowFunc = () => {
       // this ovde nasledjuje od globalnog konteksta (ili undefined u režimu stroge)
       console.log(this);
   };
   anotherArrowFunc();
   

7. Obrasci događaja u DOM-u: U većini slučajeva, this u događajnom rukovaocu ukazuje na DOM element na kojem se dogodio događaj.

   // Primer u pretraživaču
   const button = document.querySelector('button');
   button.addEventListener('click', function() {
     // this === button
     console.log(this.tagName);
   });
   

Razumevanje ovih mehanizama je ključno za pravilno korišćenje this u JavaScript-u.