Osnove rada sa kontekstom u JavaScript-u

Neka imamo neku funkciju func, unutar koje se koristi this:

javascriptfunction func() {
  console.log(this.value);
}

Na šta pokazuje this u ovoj funkciji? A mi ne znamo. I JavaScript ne zna. I sama funkcija ne zna. To jest, u trenutku kreiranja funkcije to, na šta tačno pokazuje this, nije određeno. I odrediće se tek onda, kada se ta funkcija pozove.

Neka imamo neki input:

html<input id="elem" value="text">

Povežimo sa ovim input-om našu funkciju func tako da se izvrši pri gubitku fokusa input-a. Sada u trenutku izvršenja funkcije this će pokazivati na naš input:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
  console.log(this.value); // pri gubitku fokusa ispisaće 'text'
}

Ali, mi možemo imati ne jedan input, već nekoliko:

html<input id="elem1" value="text1">
<input id="elem2" value="text2">

I na svaki od ovih input-a možemo povezati našu funkciju func. U ovom slučaju za prvi element this u trenutku poziva funkcije će pokazivati na njega, a za drugi - na njega.

U praksi to znači da this unutar funkcije zavisi od toga na kom od input-a smo izgubili fokus:

javascriptlet elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
  console.log(this.value); // ispisaće ili 'text1', ili 'text2'
}

U suštini, ovakva osobina this je veoma zgodna - mi kreiramo samo jednu funkciju i povezujemo je sa bilo kojim brojem input-a. Da this ne pokazuje na onaj element, u kom se dogodio događaj, onda mi to ne bismo mogli - morali bismo za svaki input kreirati svoju funkciju sa istim kodom!