Bazat e punës me kontekst në JavaScript

Le të themi se kemi një funksion func, brenda të cilit përdoret this:

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

Çfarë tregon this në këtë funksion? Ne nuk e dimë. Dhe JavaScript nuk e di. Dhe vetë funksioni nuk e di. Kjo do të thotë, në momentin e krijimit të funksionit, ajo që this tregon nuk është e përcaktuar. Dhe do të përcaktohet vetëm kur ky funksion të thirret.

Le të themi se kemi një input:

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

Le ta lidhim këtë input me funksionin tonë func në mënyrë që ai të ekzekutohet kur inputi humb fokusin. Tani, në momentin e ekzekutimit të funksionit this do të tregojë tek inputi ynë:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // kur humbet fokusi do të shfaqet 'text'
}

Por mund të kemi jo një input, por disa:

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

Dhe secilit prej këtyre inputeve mund t'ia lidhim funksionin tonë func. Në këtë rast, për elementin e parë, this në momentin e thirrjes së funksionit do të tregojë tek ai, dhe për të dytin - tek ai.

Në praktikë, kjo do të thotë se this brenda funksionit varet nga se në cilin prej inputeve kemi humbur fokusin:

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

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

function func() {
	console.log(this.value); // do të shfaqë ose 'text1' ose 'text2'
}

Në përgjithësi, kjo veçori e this është shumë e përshtatshme - ne krijojmë vetëm një funksion dhe e lidhim atë me çdo numër inputesh. Nëse this nuk do të tregonte tek ai element, ku ndodhi ngjarja, atëherë ne nuk do të kishim mundur ta bënim këtë - do të duhej të krijonim për çdo input funksionin e vet me të njëjtin kod!