ජවාස්ක්‍රිප්‍ට් හි කාලසටහන් සහ සන්දර්භය අහිමි වීම

සිදුවීම් හසුරුවන්නන් තුළ කාලසටහන් භාවිතා කිරීමේදී සන්දර්භය අහිමි වීමේ ගැටළු අපව බලා සිටී. අපි උදාහරණයක් දෙස බලමු.

අපට ආදාන ක්ෂේත්‍රයක් ඇතැයි සිතමු:

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

මෙම ආදාන ක්ෂේත්‍රය මත ක්ලික් කිරීමේදී නිර්නාමික ශ්‍රිතයක් ක්‍රියාත්මක වී එම ශ්‍රිතය තුළ කාලසටහනක් ආරම්භ වී, එක් එක් තත්පරයට කොන්සෝලයට යමක් මුද්‍රණය කරන බව සිතමු:

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

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // කොන්සෝලයට යමක් මුද්‍රණය කරන්න
	}, 1000);
});

දැනට සියල්ල නිවැරදිව ක්‍රියා කරයි. නමුත් දැන් අපට කොන්සෝලයට ආදාන ක්ෂේත්‍රයේ value මුද්‍රණය කිරීමට අවශ්‍ය නම් - අපව රහස් පුදුමයක් බලා සිටී: කොන්සෝලයට undefined මුද්‍රණය වේ:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // undefined මුද්‍රණය වේ
	}, 1000);
});

සමස්ත කාරණය නම්, අපට ශ්‍රිතයක් තුළ ශ්‍රිතයක් ලැබී ඇති බවයි: ක්ලික් කිරීම මත ක්‍රියාත්මක වන පිටත නිර්නාමික ශ්‍රිතයක්, සහ කාලසටහන මගින් ආරම්භ කරන ඇතුළත නිර්නාමික ශ්‍රිතයක් ඇත. පිටත ශ්‍රිතයේ this යනු ආදාන ක්ෂේත්‍රය වෙත යොමු වන නමුත් ඇතුළත එහි - නැත. මෙහිදී සන්දර්භය අහිමි වීමක් සිදු වේ.

කොන්සෝලයට දෝෂයක් ඇති නොවී undefined පමණක් මුද්‍රණය වන්නේ ඇයි, පෙර පාඩම්වල සිදු වූ ආකාරයට නොවේද? එය නිසා this ශ්‍රිතය තුළ, setInterval හරහා ක්‍රියාත්මක වන විට, එය window වෙත යොමු වේ.

මෙයින් අදහස් කරන්නේ අපි ගුණාංගයක් කියවීමට උත්සාහ කරන බවයි වස්තුවේ value window, මෙවැනි ආකාරයෙන්: window.value, නමුත් එවැනි ගුණාංගයක් එහි නොමැති අතර, අපට ලැබෙන්නේ undefined (දෝෂයක් නොවේ).

self හඳුන්වා දීමෙන් ගැටළුව නිවරදි කරමු:

elem.addEventListener('click', function() {
	let self = this;
	
	setInterval(function() {
		console.log(self.value);
	}, 1000);
});

මේ වගේ කේතයක් ලබා දී ඇතැයි සිතමු:

<input type="button" id="elem" value="1">

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

elem.addEventListener('click', function() {
	setInterval(function() {
		this.value = Number(elem.value) + 1;
	}, 1000);
});

කේතයේ කර්තෘට අවශ්‍ය වූයේ, බොත්තම ක්ලික් කිරීමේදී, එම බොත්තමේ අගය තත්පරයකට වරක් වැඩි කිරීමටයි 1 කින්. කෙසේ වෙතත්, බොත්තම ක්ලික් කිරීමේදී කිසිවක් සිදු නොවේ. කර්තෘගේ දෝෂය නිවරදි කරන්න. කර්තෘට ඔබේ පැහැදිලි කිරීම ලබා දෙන පාඨයක් ලියන්න, එහිදී ඔබ කර්තෘට පැහැදිලි කරන්නේ ඇයි ඔහුගේ දෝෂය සිදු වූයේ ද යන්න.