This pranašumas JavaScript

Iš ankstesnio pasakyto dar neaiškus ypatingas this pranašumas. Juk viduje įvykio apdorojimo funkcijos mūsų elementas ir taip bus prieinamas - juk kintamasis elem bus globalus mūsų funkcijai func:

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

function func() {
  // čia prieinamas kintamasis elem su mūsų elementu
}

Ir, nesunku suprasti, kad this turinys ir kintamojo elem turinys mūsų atveju yra lygūs:

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

function func() {
  console.log(elem === this); // išves true
}

Koks gi yra ypatingas this pranašumas? Jis pasireiškia, kai mes turime kelis elementus, ir prie kiekvieno yra pririšta ta pati funkcija.

Pažiūrėkime pavyzdžiu. Tarkime, mes turime 3 mygtukus:

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

Gaukime nuorodas į juos į kintamuosius:

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

Pririškime prie šių mygtukų tą pačią funkciją:

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

O viduje funkcijos išvesime this.value:

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

Taigi, mes turime tris mygtukus. Paspaudimas ant kiekvieno mygtuko sukels funkcijos func iškvietimą. Tuo pat metu kiekvienu kliku this talpins nuorodą į tą mygtuką, kuriame įvyko įvykis.

Tai yra kiekvienas paspaudimas išves į konsolę value to mygtuko, ant kurio įvyko paspaudimas, bet tai darys ta pati funkcija func! Štai koks yra this naudojimo pranašumas.