Faida ya this katika JavaScript

Kutokana na yaliyosemwa hapo awali bado haijalijulikana wazi faida maalum ya this. Hata hivyo, ndani ya kitendakazi-kichakataji kipengele chetu kitapatikana - kwani kutofautisha elem kitakuwa cha kimataifa kwa kitendakazi chetu func:

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

function func() {
  // hapa inapatikana kutofautisha elem na kipengele chetu
}

Na, si vigumu kufikiri, kwamba yaliyomo this na yaliyomo katika kutofautisha elem katika kesi yetu ni sawa:

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

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

Basi faida maalum ya this iko wapi? Inajidhihirisha wakati tuna vipengele vingi, na kila kimoja kimeunganishwa na kitendakazi kile kile.

Tuangalie kwa mfano. Hebu tuseme tuna 3 vitufe:

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

Tutapata viungo kwenda kwenye hivyo katika vigezo:

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

Tutaunganisha kwenye hivi vitufe kitendakazi kile kile:

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

Na ndani ya kitendakazi tutatoa this.value:

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

Itatokea kuwa tuna vitufe vitatu. Ushindaji kwa kila kitufe utasababisha wito wa kitendakazi func. Wakati huo huo kwa kila kibonyezo this itakuwa na kiungo kwenye kitufe kile, ambapo tukio limetokea.

Yaani kila ushindaji utatoa kwenye konsoli value ya kitufe kile, ambacho kimeshindwa, lakini kufanya hivyo itakuwa kitendakazi kile kile func! Hiyo ndiyo faida ya kutumia this.