JavaScript ရှိ Context အလုပ်လုပ်ပုံအခြေခံများ

ကျွန်ုပ်တို့၌ func ဟုခေါ်သော ဖန်ရှင် တစ်ခုရှိပါစေ၊ ယင်းအတွင်း၌ this ကို အသုံးပြုထားသည်။

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

ဤဖန်ရှင်အတွင်းရှိ this သည် ဘာကို ညွှန်းသနည်း။ ကျွန်ုပ်တို့ မသိပါ။ JavaScript လည်း မသိပါ။ ဖန်ရှင်ကိုယ်တိုင်လည်း မသိပါ။ ဆိုလိုသည်မှာ ဖန်ရှင်ဖန်တီးသည့်အချိန်တွင် this အတိအကျ ညွှန်းသည့်အရာသည် သတ်မှတ်မထားပါ။ ယင်းဖန်ရှင် အမှန်တကယ် ခေါ်သုံးသည့်အချိန်မှသာ သတ်မှတ်ပေးမည် ဖြစ်သည်။

ကျွန်ုပ်တို့၌ input တစ်ခုရှိပါစေ။

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

ဤ input သို့ ကျွန်ုပ်တို့၏ func ဖန်ရှင်ကို ချိတ်ဆက်ပါမည်၊ ထိုသို့ဆိုလျှင် input မှ အာရုံစိုက်မှု ပျောက်သွားသည့်အခါတိုင်း ယင်းဖန်ရှင် အလုပ်လုပ်ပါမည်။ ယခု ဖန်ရှင် အလုပ်လုပ်စဉ်တွင် this သည် ကျွန်ုပ်တို့၏ input ကို ညွှန်းနေပါမည်။

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

elem.addEventListener('blur', func);
function func() {
	console.log(this.value); // အာရုံစိုက်မှု ပျောက်သွားလျှင် 'text' ကိုပြသမည်
}

သို့သော် input တစ်ခုမက များစွာရှိနိုင်သည်။

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

ထို့အပြင် ဤ input များ တစ်ခုစီသို့ ကျွန်ုပ်တို့၏ func ဖန်ရှင်ကို ချိတ်ဆက်နိုင်သည်။ ဤသို့ဆိုပါက ပထမ element အတွက် ဖန်ရှင်ခေါ်သုံးသည့်အချိန်တွင် this သည် ယင်း element ကို ညွှန်းမည်၊ ဒုတိယ element အတွက်မူ ယင်း element ကိုပင် ညွှန်းမည်။

လက်တွေ့တွင် ဆိုလိုသည်မှာ ဖန်ရှင်အတွင်းရှိ this သည် ကျွန်ုပ်တို့ မည်သည့် input ပေါ်တွင် အာရုံစိုက်မှု ပျောက်သွားသည့်ပေါ် မူတည်သည်။

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 ၏ ထူးခြားချက်သည် အလွန်အဆင်ပြေစေပါသည် - ကျွန်ုပ်တို့သည် ဖန်ရှင်တစ်ခုတည်းကိုသာ ဖန်တီးပြီး input အရေအတွက် မည်မျှပင်ရှိစေကာမူ ချိတ်ဆက်နိုင်ပါသည်။ အကယ်၍ this သည် ဖြစ်ပျက်သည့် event ရှိသော element ကို ညွှန်းခြင်းမရှိပါက ကျွန်ုပ်တို့ ထိုသို့မလုပ်နိုင်ပါ - input တစ်ခုစီအတွက် တူညီသောကုဒ်များဖြင့် သီးသန့်ဖန်ရှင်များ ဖန်တီးရဦးမည် ဖြစ်သည်။