Bazele lucrului cu contextul în JavaScript

Să presupunem că avem o funcție func, în interiorul căreia este folosit this:

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

La ce indică this în această funcție? Și nu știm. Nici JavaScript nu știe. Și nici funcția în sine nu știe. Adică, în momentul creării funcției, la ce anume indică this nu este definit. Și acest lucru va fi determinat doar atunci când această funcție va fi apelată.

Să presupunem că avem un câmp de introducere:

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

Să legăm de acest câmp de introducere funcția noastră func astfel încât să se execute la pierderea focusului de către câmp. Acum, în momentul executării funcției this va indica către câmpul nostru de introducere:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // la pierderea focusului va afișa 'text'
}

Dar, până la urmă, putem avea nu unul, ci mai multe câmpuri de introducere:

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

Și la fiecare dintre aceste câmpuri de introducere putem lega funcția noastră func. În acest caz, pentru primul element this în momentul apelării funcției va indica către el, iar pentru al doilea - către el.

În practică, aceasta înseamnă că this din interiorul funcției depinde de la care dintre câmpuri am pierdut focusul:

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

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

function func() {
	console.log(this.value); // va afișa fie 'text1', fie 'text2'
}

În general, această particularitate a lui this este foarte convenabilă - creăm doar o funcție și o legăm la oricâte câmpuri de introducere. Dacă this nu ar indica către elementul în care a avut loc evenimentul, atunci nu am fi putut face acest lucru - ar fi trebuit pentru fiecare câmp de introducere să creăm câte o funcție proprie cu același cod!