U JavaScript-u, this je posebna ključna reč koja se koristi unutar funkcija i metoda da bi referencirala trenutni objekat ili kontekst u kojem se funkcija poziva. Vrednost this zavisi od načina na koji je funkcija pozvana, što može zbuniti početnike.

Ključna reč this u JavaScript-u može imati različita značenja u zavisnosti od konteksta u kojem se koristi.

U nastavku su neki od načina koje koristimo u ovom predmetu (nije sve nabrojano, jer ne koristimo sve opcije):

Globalni kontekst (global scope)

   Kada se this koristi izvan funkcije ili objekta, odnosno u globalnom kontekstu, ona referencira globalni objekat.:

      - U pretraživaču (browser) globalni objekat je window, pa je this ekvivalentno window.  - vidi 

console.log(this); // Ispisuje 'window' objekat u konzoli web browsera

      - U funkcijama koje nisu reakcija na događaje, takođe je globalni objekat  window, pa je this ekvivalentno window. - vidi

   <button onclick="prikaz()">Klikni me</button>

   <script>
       function prikaz() {
           console.log(this); // Ispisuje 'window' objekat u konzoli web browsera
       }
</script>
Kontekst objekta (object method)

   Kada se this koristi unutar metode objekta, ona se odnosi na objekat koji poziva tu metodu (odnosi se na taj objekat) - vidi 

const osoba = {
    ime: "Ana",
    pozdravi: function() {
        console.log("Zdravo, ja sam " + this.ime);
    }
};

osoba.pozdravi(); // Ispisuje: "Zdravo, ja sam Ana"

Objašnjenje: U primeru iznad, this referencira objekat osoba, jer je funkcija pozdravi pozvana kao metoda tog objekta.

Kontekst konstruktorske funkcije (constructor function)

   Kada se this koristi unutar konstruktorske funkcije (funkcija koja kreira instance objekata pomoću new operatora), this referencira novokreirani objekat. - vidi 

function Osoba(ime) {
    this.ime = ime;
}

const osoba1 = new Osoba("Marko");
console.log(osoba1.ime); // Ispisuje: "Marko"

Kontekst događaja (event context)

Kada se this koristi unutar događajske funkcije u DOM-u, this se odnosi na element koji je izazvao događaj.

Na objekat this se najčešće nailazi kada se kreiraju funkcije događaja. U tom slučaju this predstavlja element koji je izazvao događaj.

Na primer, kada je funkcija povezana sa klikom na element, this se odnosi na element na koji je kliknuto.

Prvi način: ( ako se osluškuje događaj )

Ako se koristi AddEventListener:
<button id="dugme S">Klikni me <br> (Dugme S)</button>
<script>
    document.getElementById("dugme S").addEventListener("click", function () {
      this.style.backgroundColor="red"; // menja boju pozadine dugmeta
      console.log(this); // u konzolu ispisuje objekat button koje ima id="dugme S" i crvenu pozadinu
    })

</script>

U ovom slučaju se osluškuje događaj klika na elementu sa id="dugme S", pa kada se klik desi izvršava se funkcija koja ja navedena u nastavku. Koristi se anonimna funkcija (bez imena), jer nema potrebe navoditi ime za funkciju koja se samo ovde koristi. U toj funkciji je this u stvari taj element (sa id="dugme S").

Drugi način: ( ako nema osluškivanja događaja )

Ako se this prenosi kao parametar funkciji. Ovde je this u zagradama onaj element koji poziva funkciju i u funkciji je to ulazni parametar koji se kao takav koristi. (U toj istoj funkciji, ako se upotrebi reč this, odnosiće se na globalni objekat):

<button onclick="sakrijMe(this)"> sakrij ovo dugme</button>
  <script>
    function sakrijMe(element) {
      element.style.display="none"; // sakriva element na koji je kliknuto
console.log(element); // u konzolu ispisuje objekat koji je pozvao funkciju (button)
console.log(this); // u konzolu ispisuje objekat "window"
    }
  </script>
 

... U ovom slučaju funkcija sakrijMe je napisana u globalnom kontekstu - unutar nje se korišćenjem reči this podrazumeva da je window.

Međutim, pozivom funkcije iz događaja dugmeta onclick sa sve parametrom this: tu se kao parametar prosleđuje element unutar kojega se poziv izvršava - u ovom slučaju to je dugme.

Ako bismo tu istu funkciju pozvali iz nekog drugog elementa, sa parametrom this, tada bi this bio taj drugi elemenat - > Istu funkciju možemo da pozivamo iz različitih elemenata na web stranici.

Last modified: Friday, 12 December 2025, 9:37 AM