JavaScript-ում this-ի առավելությունը

Նախկինում ասվածից դեռևս ակնհայտ չէ this-ի հատուկ առավելությունը: Չէ՞ որ իրադարձության մշակիչ ֆունկցիայի ներսում մեր տարրը հասանելի կլինի ամեն դեպքում - քանի որ elem փոփոխականը գլոբալ կլինի մեր func ֆունկցիայի համար:

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

function func() {
  // այստեղ հասանելի է elem փոփոխականը՝ մեր տարրով
}

Եվ, դժվար չէ գուշակել, որ this-ի պարունակությունը և elem փոփոխականի պարունակությունը մեր դեպքում հավասար են:

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

function func() {
  console.log(elem === this); // կարտածի true
}

Ո՞րն է this-ի հատուկ առավելությունը: Այն դրսևորվում է, երբ մենք ունենք մի քանի տարրեր, և յուրաքանչյուրին կապված է միևնույն ֆունկցիան:

Օրինակով նայենք: Ենթադրենք ունենք 3 կոճակներ:

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

Ստացենք դրանց հղումները փոփոխականներում:

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

Կկապենք այս կոճակներին միևնույն ֆունկցիան:

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

Իսկ ֆունկցիայի ներսում կարտածենք this.value:

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

Ստացվում է, որ ունենք երեք կոճակ: Յուրաքանչյուր կոճակի վրա սեղմումը կհանգեցնի func ֆունկցիայի կանչին: Այդ դեպքում ամեն սեղմումի ժամանակ this-ը կպարունակի հղում դեպի այն կոճակը, որում տեղի է ունեցել իրադարձությունը:

Այսինքն՝ ամեն սեղմումը կոնսոլում կարտածի value այն կոճակի, որի վրա տեղի է ունեցել սեղմումը, բայց դա կանի միևնույն func ֆունկցիան: Ահա թե որտեղ է this-ի օգտագործման առավելությունը: