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:

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

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

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

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

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

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

O viduje funkcijos išvesime this.value:

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

Duoti 5 pastraipos su kažkokiais tekstais. Paspaudus ant bet kurios pastraipos, įrašykite į jos pabaigą šauktuką.

Duoti 3 įvesties laukai, kuriuose įrašyti kažkokie skaičiai. Praradus fokusą bet kuriame įvesties lauke, pakelkite jame esantį skaičių kvadratu.