JavaScript'те this'тин артыкчылыгы

Мурун айтылгандардан this'тин өзгөчө артыкчылыгы ачык эмес. Анткени функция-обработчиктин ичинде биздин элементке жетүү оңой - себеби өзгөрмө elem биздин func функциябыз үчүн жалпыга бирдей болот:

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

function func() {
	// бул жерде биздин элемент менен elem өзгөрмөсүнө жетүүгө болот
}

Жана, түшүнүү кыйын эмес, thisтин мазмуну жана elem өзгөрмөсүнүн мазмуну биздин учурда барабар:

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

function func() {
	console.log(elem === this); // true чыгарат
}

Анда thisтин өзгөчө артыкчылыгы кайда? Ал бизде бир нече элемент болгондо, жана ар бирине бир эле функция байланыштырылганда көрүнөт.

Мисал менен карап көрөлү. Бизде 3 баскыч болсун:

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

Аларга шилтемелерди өзгөрмөлөргө алалы:

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

Бул баскычтарга бир эле функцияны байланыштыралы:

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

Функциянын ичинде this.value чыгаралы:

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

Натыйжада, бизде үч баскыч бар. Ар бир баскычка басуу func функциясын чакырууга алып келет. Бул учурда ар бир чыкылдатууда this окуя болгон баскычка шилтеме камтыйт.

Башкача айтканда, ар бир басуу консолго басылган баскычтын value маанисин чыгарат, бирок муну бир эле func функциясы жасайт! Вот this колдонуунун артыкчылыгы ушул.

Кандайдыр бир тексттер менен 5 абзац берилген. Ар кандай абзацты чыкылдатканда, анын текстинин аягына үндө белгисин кошуңуз.

Кандайдыр бир сандар жазылган 3 input берилген. Ар бир input'то фокустан чыкканда, андагы санды квадратка көтөрүңүз.