JavaScript တွင် ဆက်စပ်မှု (Context) ပျောက်ဆုံးခြင်း

ကျွန်ုပ်တို့တွင် လုပ်ဆောင်ချက်တစ်ခုအတွင်း နောက်ထပ်လုပ်ဆောင်ချက်တစ်ခု ရှိသည်ဆိုပါစို့။ အပြင်ဘက်ရှိ လုပ်ဆောင်ချက်ကို parent ဟုခေါ်ပြီး အတွင်းဘက်ရှိ လုပ်ဆောင်ချက်ကို child ဟုခေါ်ကြမည်။

function parent() {
	function child() {
		
	}
}

ယခင်သင်ခန်းစာများမှ သင်သိထားသည်မှာ အပြင်ဘက်လုပ်ဆောင်ချက်အတွင်း ကိန်းရှင် (variable) တစ်ခုခု သတ်မှတ်ပေးပါက ၎င်းသည် အတွင်းဘက်လုပ်ဆောင်ချက်မှ ရယူအသုံးပြုနိုင်မည်ဖြစ်သည်။

function parent() {
	let str = 'abcde';
	
	function child() {
		console.log(str); // 'abcde' ကို ပြသမည်
	}
	child(); // အတွင်းဘက်လုပ်ဆောင်ချက်ကို ခေါ်ယူသည်
}

parent(); // အပြင်ဘက်လုပ်ဆောင်ချက်ကို ခေါ်ယူသည်

သို့သော် သတိထားရမည့်အချက်တစ်ခုရှိသည်။ အတွင်းဘက်လုပ်ဆောင်ချက်သည် အပြင်ဘက်လုပ်ဆောင်ချက်၏ ကိန်းရှင်အားလုံးကို ရယူအသုံးပြုနိုင်သော်လည်း this ကိုတော့ ရယူအသုံးပြု၍မရပါ။ အဓိပ္ပာယ်မှာ အကယ်၍ အပြင်ဘက်လုပ်ဆောင်ချက်သည် DOM အစိတ်အပိုင်းတစ်ခုနှင့် ချိတ်ဆက်ထားပါက ၎င်းအတွင်း၌ this သည် အဆိုပါအစိတ်အပိုင်းကို ညွှန်ပြမည်ဖြစ်သော်လည်း အတွင်းဘက်လုပ်ဆောင်ချက်၏ this ကမူ အဲဒီအစိတ်အပိုင်းကို ညွှန်ပြမည်မဟုတ်ပါ။

ထို့နောက် အတွင်းဘက်လုပ်ဆောင်ချက်အတွင်းthis သည် ဘာကို ညွှန်ပြမည်နည်း။ အဖြေမှာ ၎င်းသည် undefined နှင့် ညီမျှမည်ဖြစ်သည် (တင်းကျပ်သော mode တွင်) အဘယ်ကြောင့်ဆိုသော် လုပ်ဆောင်ချက်သည် ဘာနှင့်မှ ချိတ်ဆက်မထားသောကြောင့်ဖြစ်သည်။

လက်တွေ့တွင် စမ်းကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် input တစ်ခုရှိသည်ဆိုပါစို့။

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

ထို input အား parent လုပ်ဆောင်ချက်ဖြင့် ချိတ်ဆက်ပေးပါမည်။ ၎င်းလုပ်ဆောင်ချက်သည် input မှ အာရုံစိုက်မှုပြုတ်သွားသောအခါ (blur) ခေါ်ယူခံရမည်ဖြစ်သည်။

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// အာရုံစိုက်မှုပြုတ်သွားသောအခါ ခေါ်ယူခံရမည်။
function parent() {
	// ဒီနေရာတွင် ကုဒ်တစ်ချို့ရှိမည်။
	
	function child() {
		// ဒီနေရာတွင် ကုဒ်တစ်ချို့ရှိမည်။
	}
	child(); // အတွင်းဘက်လုပ်ဆောင်ချက်ကို ခေါ်ယူသည်
}

this ၏ တန်ဖိုးကို နေရာနှစ်ခုတွင် console ထဲသို့ ထုတ်ပြကြည့်ကြမည်။ parent လုပ်ဆောင်ချက်အတွင်းနှင့် child လုပ်ဆောင်ချက်အတွင်း ဖြစ်သည်။

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this); // ကျွန်ုပ်တို့၏ input သို့ လမ်းညွှန်ချက် (reference) ကို ပြသမည်
	
	function child() {
		console.log(this); // undefined ကို ပြသမည်
	}
	child();
}

ဤကုဒ်ကို run ပါ၊ input မှ အာရုံစိုက်မှုပြုတ်သွားစေပြီး console ကို ကြည့်ပါ။ ပထမ console.log သည် console တွင် ကျွန်ုပ်တို့၏ input သို့ လမ်းညွှန်ချက် (reference) ကို ပြသပြီး ဒုတိယတစ်ခုကမူ ရိုးရိုး undefined ကိုသာ ပြသသည်ကို သင်တွေ့ရမည်။ ထိုသို့ this သည် ကျွန်ုပ်တို့မျှော်လင့်ထားသည်ထက် မတူညီစွာ ကျွန်ုပ်တို့လိုအပ်သောအရာကို မညွှန်ပြဘဲ ဖြစ်နေသော အခြေအနေကို ဆက်စပ်မှု (Context) ပျောက်ဆုံးခြင်း ဟုခေါ်သည်။

ယခုတစ်ကြိမ်တွင် လုပ်ဆောင်ချက်နှစ်ခုစလုံး၌ input ၏ value ကို ထုတ်ပြကြည့်ကြမည်။ မှတ်ချက်ဖြင့် ပြထားသော ကုဒ်လိုင်းများတွင် ဘာတွေထွက်လာမည်ကို သတ်မှတ်ပါ။

"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
	console.log(this.value); // ဘာကို ပြသမည်နည်း။
	
	function child() {
		console.log(this.value); // ဘာကို ပြသမည်နည်း။
	}
	child();
}