JavaScript හි ප්‍රසන්නය සමඟ වැඩ කිරීමේ මූලික කරුණු

අපට යම් ශ්‍රිතයක් func තිබිය යුතුය, එහි ඇතුළත this භාවිතා කරයි:

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

මෙම ශ්‍රිතය තුළ this කුමක් අධිෂ්ඨාන කරයිද? අපි දන්නේ නැත. එසේම JavaScript එය දන්නේ නැත. ශ්‍රිතයම දන්නේ නැත. එනම් ශ්‍රිතය සෑදීමේ මොහොතේ this කුමක් අධිෂ්ඨාන කරයිද යන්න, නිර්වචනය කර නැත. එය නිර්වචනය වන්නේ, මෙම ශ්‍රිතය කැදවනු ලබන විට පමණි.

අපට යම් ආදාන ක්ෂේත්‍රයක් (input) තිබිය යුතුය:

<input id="elem" value="text">

මෙම ආදාන ක්ෂේත්‍රයට අපගේ ශ්‍රිතය func බැඳිය යුතුය එවිට එය ආදාන ක්ෂේත්‍රයෙන් නාභිගත බව අහිමි වූ විට ක්‍රියාත්මක වේ. දැන් ශ්‍රිතය ක්‍රියාත්මක වන මොහොතේ this අපගේ ආදාන ක්ෂේත්‍රය අධිෂ්ඨාන කරයි:

let elem = document.querySelector('#elem');

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // නාභිගත බව අහිමි වූ විට 'text' පෙන්වයි
}

නමුත් අපට එක් ආදාන ක්ෂේත්‍රයක් පමණක් නොව, බොහෝ ගණනක් තිබිය හැකිය:

<input id="elem1" value="text1">
<input id="elem2" value="text2">

මෙම ආදාන ක්ෂේත්‍ර එක් එක් අපගේ ශ්‍රිතය func වෙත බැඳිය හැකිය. මෙම අවස්ථාවේ දී පළමු මූලද්‍රව්‍යය සඳහා this ශ්‍රිතය කැදවීමේ මොහොතේ එය අධිෂ්ඨාන කරයි, සහ දෙවැන්න සඳහා - එය අධිෂ්ඨාන කරයි.

ප්‍රායෝගිකව මෙයින් අදහස් කරන්නේ this ශ්‍රිතය තුළ රඳා පවතින්නේ, අපි කුමන ආදාන ක්ෂේත්‍රයකින් නාභිගත බව අහිමි කළේද යන්න මත බවයි:

let elem1 = document.querySelector('#elem1');
elem1.addEventListener('blur', func);

let elem2 = document.querySelector('#elem2');
elem2.addEventListener('blur', func);

function func() {
	console.log(this.value); // 'text1' හෝ 'text2' පෙන්වයි
}

සාමාන්‍යයෙන්, this හි මෙම විශේෂාංගය ඉතා පහසුය - අපි එක් ශ්‍රිතයක් පමණක් සාදන අතර එය ඕනෑම ආදාන ක්ෂේත්‍ර ගණනකට බඳින්නෙමු. this එම මූලද්‍රව්‍යය අධිෂ්ඨාන නොකරයි නම්, සිදුවීම සිදු වූ තැන, එවිට අපට එය සාර්ථක නොවනු ඇත - එක් එක් ආදාන ක්ෂේත්‍රය සඳහා සමාන කේතය සහිත තමන්ගේම ශ්‍රිතයක් සෑදිය යුතු වනු ඇත!