A this előnye JavaScriptben

A korábbiakból még nem nyilvánvaló a this különleges előnye. Hiszen az eseménykezelő függvényen belül úgyis elérhető lesz az elemünk - hiszen a elem változó globális lesz a func függvényünk számára:

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

function func() {
  // itt elérhető az elem változó az elemünkkel
}

És könnyű belátni, hogy a this tartalma és a elem változó tartalma esetünkben megegyezik:

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

function func() {
  console.log(elem === this); // true-t ír ki
}

Mi is a this különleges előnye? Az mutatkozik meg, amikor több elemünk van, és mindegyikhez ugyanaz a függvény van kötve.

Nézzünk egy példát. Tegyük fel, hogy 3 gombunk van:

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

Szerezzük meg a hivatkozásokat rájuk változókba:

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

Kössük ezekhez a gombokhoz ugyanazt a függvényt:

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

A függvényen belül pedig írjuk ki a this.value-t:

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

Az eredmény az, hogy három gombunk van. Bármelyik gombra kattintva a func függvény hívódik meg. Eközben minden kattintásnál a this tartalmazni fogja annak a gombnak a hivatkozását, ahol az esemény bekövetkezett.

Vagyis minden kattintás a konzolra írja ki annak a gombnak a value értékét, amelyiken a kattintás történt, de mindezt ugyanaz a func függvény teszi! Ez a this használatának előnye.