Основи на работа со контекст во JavaScript

Нека имаме некоја функција func, внатре во која се користи this:

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

На што покажува this во оваа функција? А ние не знаеме. И JavaScript не знае. И самата функција не знае. То ест, во моментот на креирање на функцијата тоа на што точно покажува this, не е определено. И ќе се определи само тогаш, кога ќе се повика таа функција.

Нека имаме некој input:

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

Да ја врземе на овој input нашата функција func така што ќе се изврши при загуба на фокусот на input-от. Сега во моментот на извршување на функцијата this ќе покажува на нашиот input:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // при загуба на фокус ќе испише 'text'
}

Но, може да имаме не еден input, туку неколку:

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

И на секој од овие input-и може да ја врземе нашата функција func. Во овој случај за првиот елемент this во моментот на повик на функцијата ќе покажува на него, а за вториот - на него.

Во пракса ова значи дека this внатре во функцијата зависи од тоа на кој од input-ите ја изгубивме фокусот:

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

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

function func() {
	console.log(this.value); // ќе испише или 'text1', или 'text2'
}

Во принцип, ваквата особеност на this е многу погодна - ние креираме само една функција и ја врзуваме за било кој број на input-и. Ако this не покажуваше на оној елемент, во кој се случи настанот, тогаш ние тоа немаше да успееме - ќе требаше за секој input да креираме своја функција со истиот код!