this priekšrocība JavaScript

No iepriekš teiktā vēl nav acīmredzama īpašā this priekšrocība. Galu galā apstrādes funkcijas iekšienē tomēr būs pieejams mūsu elements - jo mainīgais elem būs globāls mūsu funkcijai func:

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

function func() {
	// šeit ir pieejams mainīgais elem ar mūsu elementu
}

Un, nav grūti saprast, ka this saturs un mainīgā elem saturs mūsu gadījumā ir vienādi:

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

function func() {
	console.log(elem === this); // izvadīs true
}

Kāda tad ir īpašā this priekšrocība? Tā parādās, kad mums ir vairāki elementi, un katram ir piesaistīta viena un tā pati funkcija.

Apskatīsim piemērā. Pieņemsim, ka mums ir 3 pogas:

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

Iegūsim to atsauces mainīgajos:

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

Piesaistīsim šīm pogām vienu un to pašu funkciju:

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

Un funkcijas iekšienē izvadīsim this.value:

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

Izrādīsies, ka mums ir trīs pogas. Noklikšķināšana uz katras pogas izraisīs funkcijas func izsaukšanu. Tajā pašā laikā ar katru klikšķi this saturēs atsauci uz to pogu, kurā notika notikums.

Tas ir, katrs noklikšķinājums konsolē izvadīs value no tās pogas, uz kuras notika noklikšķināšana, un to darīs viena un tā pati funkcija func! Lūk, kāda ir this izmantošanas priekšrocība.

Ir doti 5 rindkopas ar kādiem tekstiem. Noklikšķinot uz jebkuras rindkopas, ierakstiet beigās tās teksta izsaukuma zīmi.

Ir doti 3 ievades lauki, kuros ir ierakstīti kādi skaitļi. Pazaudējot fokusu jebkurā no ievades laukiem, kāpiet tajā esošo skaitli kvadrātā.