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:

javascriptlet 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:

javascriptlet 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:

html<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:

javascriptlet 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:

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

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

javascriptfunction 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.