Pagrindai dirbant su kontekstu JavaScript

Tarkime, kad turime kokią nors funkciją func, kurios viduje naudojamas this:

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

Į ką nukreiptas this šioje funkcijoje? O mes nežinome. Ir JavaScript nežino. Ir pati funkcija nežino. Tai yra, funkcijos sukūrimo metu tai, į ką konkretiai nukreiptas this, neapibrėžta. Ir tai apsibrėš tik tada, kai ši funkcija bus iškviesta.

Tarkime, kad turime kokį nors input lauką:

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

Priskirkime prie šio input lauko mūsų funkciją func taip, kad ji vyktų praradus fokusą input laukui. Dabar funkcijos vykdymo metu this bus nukreiptas į mūsų input lauką:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // praradus fokusą išves 'text'
}

Bet juk mes galime turėti ne vieną input lauką, o kelis:

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

Ir prie kiekvieno iš šių input laukų mes galime priskirti mūsų funkciją func. Šiuo atveju pirmam elementui this funkcijos iškvietimo metu bus nukreiptas į jį, o antram - į jį.

Praktiškai tai reiškia, kad this funkcijos viduje priklauso nuo to, kuriame input lauke mes praradome fokusą:

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

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

function func() {
	console.log(this.value); // išves arba 'text1', arba 'text2'
}

Iš esmės, ši this ypatybė labai patogi - mes sukuriame tik vieną funkciją ir pririšame ją prie bet kokio kiekio input laukų. Jei this nekryptų į tą elementą, kuriame įvyko įvykis, tai mes to negalėtume padaryti - tektų kiekvienam input laukui kurti savo funkciją su tuo pačiu kodu!