Die Voordeel van this in JavaScript

Uit wat vroeër gesê is, is die besondere voordeel van this nog nie duidelik nie. Tog sal ons element binne die gebeurtenishandlerfunksie toeganklik wees - want die veranderlike elem sal globaal wees vir ons funksie func:

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

function func() {
	// hier is die veranderlike elem met ons element toeganklik
}

En, dit is maklik om te besef dat die inhoud van this en die inhoud van die veranderlike elem in ons geval gelyk is:

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

function func() {
	console.log(elem === this); // sal true uitdruk
}

Wat is dan die besondere voordeel van this? Dit kom na vore wanneer ons verskeie elemente het, en elkeen is gekoppel aan dieselfde funksie.

Kom ons kyk na 'n voorbeeld. Kom ons sê ons het 3 knoppies:

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

Kom ons kry verwysings na hulle in veranderlikes:

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

Kom ons koppel dieselfde funksie aan hierdie knoppies:

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

En binne die funksie sal ons this.value uitdruk:

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

Die resultaat is dat ons drie knoppies het. Die klik op elke knoppie sal lei tot die oproep van die funksie func. Terselfdertyd met elke klik sal this 'n verwysing bevat na daardie knoppie waar die gebeurtenis plaasgevind het.

Dit beteken elke klik sal die value van die knoppie waarop geklik is, in die konsole uitdruk, maar dit sal deur een en dieselfde funksie func gedoen word! Dit is die voordeel van die gebruik van this.

Gegee 5 paragrawe met een of ander teks. Met 'n klik op enige paragraaf, skryf 'n uitroepteken aan die einde van sy teks.

Gegee 3 invoervelde, waarin een of ander nommers geskryf is. Met die verlies van fokus in enige van die invoervelde, verhef die getal wat daarin staan tot die tweede mag.