JavaScript-da kontekst bilan ishlash asoslari

Faraz qilaylik, bizda func deb nomlangan funksiya bor, uning ichida this ishlatilgan:

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

Ushbu funksiyada this nima ga ishora qiladi? Va biz bilmaymiz. Va JavaScript ham bilmaydi. Va funksiyaning o'zi ham bilmaydi. Ya'ni funksiya yaratilgan paytda this aniq nima ga ishora qilishi, aniq emas. Va bu faqat shu funksiya chaqirilgan paytda aniq bo'ladi.

Faraz qilaylik, bizda ma'lum bir input maydoni bor:

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

Keling, ushbu input maydoniga func funksiyamizni bog'laylik, shundayki u input fokusni yo'qotganida bajarilsin. Endi funksiya bajarilayotgan paytda this bizning input maydonimizga ishora qiladi:

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // fokus yo'qolganda 'text' chiqadi
}

Lekin bizda bitta input emas, balki bir nechtasi bo'lishi mumkin:

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

Va biz ushbu inputlarning har biriga func funksiyamizni bog'lashimiz mumkin. Bu holda birinchi element uchun this funksiya chaqirilgan paytda unga ishora qiladi, ikkinchisi uchun - unga.

Amaliyotda bu shuni anglatadiki, this funksiya ichida qaysi inputda biz fokusni yo'qotganimizga bog'liq:

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' yoki 'text2' chiqadi
}

Umuman olganda, this ning bunday xususiyati juda qulay - biz faqat bitta funksiya yaratamiz va uni istalgan sonli inputga bog'laymiz. Agar this hodisa sodir bo'lgan elementga ishora qilmasa, unda bu amalga oshmagan bo'lar edi - har bir input uchun bir xil kodli o'z funksiyasini yaratishga majbur bo'lar edik!