ජාවාස්ක්‍රිප්ට් හි 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 භාවිතා කිරීමේ වාසිය එයයි.