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 үшін бірдей кодпен өз функциясын жасауға турар еді!