JavaScript-da this ning afzalliklari

Oldin aytilganlardan hali this ning o'ziga xos afzalligi aniq ko'rinmaydi. Axir, funktsiya-ishlovchisi ichida bizning elementimizga o'ziga xos o'zgaruvchi elem bizning func funktsiyamiz uchun global bo'ladi:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// bu yerda elem o'zgaruvchisi orqali elementimizga kirish mumkin
}

Va, this ning mazmuni bilan elem o'zgaruvchisining mazmuni bizning holatda teng ekanligini tushunish qiyin emas:

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true chiqadi
}

this ning o'ziga xos afzalligi nima? U o'zini namoyon qiladi, qachonki bir nechta elementlar bo'lsa, va ularning har biriga bir xil funktsiya bog'langan bo'lsa.

Keling, misol orqali ko'rib chiqaylik. Faraz qilaylik, bizda 3 tugma bor:

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

Keling, ularga havolalarni o'zgaruvchilarga olaylik:

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

Keling, bu tugmalarga bir xil funktsiyani bog'laymiz:

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

Funktsiya ichida esa this.value ni chiqaramiz:

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

Shunday qilib, bizda uchta tugma bor. Har bir tugmani bosish func funktsiyasini chaqiradi. Shu bilan birga, har bir chiquvda this hodisa sodir bo'lgan tugmaga havolani o'z ichiga oladi.

Ya'ni har bir bosish konsolga bosish sodir bo'lgan tugmaning value sini chiqaradi, lekin buni bir xil func funktsiyasi bajaradi! this dan foydalanishning afzalligi shunda.

5 ta abzats berilgan, ularning har qanday matnlari bor. Har qanday abzatsga bosilganda, uning matnining oxiriga undov belgisini qo'shing.

3 ta input maydoni berilgan, ularning ichida qandaydir sonlar yozilgan. Har qanday inputda fokus yo'qotilganda, uning ichidagi sonni kvadratga ko'taring.