JavaScript တွင် this ၏ အကျိုးကျေးဇူး

ယခင်က ပြောခဲ့သည်များမှ this ၏ အထူးအကျိုးကျေးဇူးသည် အထင်အရှား မပေါ်လွင်သေးပါ။ ဖန်ရှင်ကောလ်ဘက်ခ်အတွင်း၌ ကျွန်ုပ်တို့၏ element ကို ရရှိနိုင်မည်ဖြစ်သည် - အဘယ်ကြောင့်ဆိုသော် elem ကိန်ရှင်သည် ကျွန်ုပ်တို့၏ func ဖန်ရှင် အတွက် global ဖြစ်နေမည် ဖြစ်သောကြောင့်ပင်။

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	// ဤနေရာတွင် ကျွန်ုပ်တို့၏ element ပါသည့် elem ကိန်ရှင်ကို ရနိုင်သည်
}

ထို့ပြင်၊ စဉ်းစားရလွယ်ကူသည်မှာ this အတွင်းရှိအရာနှင့် elem ကိန်ရှင်အတွင်းရှိအရာသည် ကျွန်ုပ်တို့၏ ကိစ္စတွင် တူညီသည်ဟူသော အချက်ပင်။

let elem = document.querySelector('#elem');
elem.addEventListener('click', func);

function func() {
	console.log(elem === this); // true ကို ပြသမည်
}

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

နမူနာဖြင့် ကြည့်ကြစို့။ ကျွန်ုပ်တို့တွင် 3 ခလုတ်များ ရှိသည်ဟု ဆိုကြပါစို့။

<input id="button1" type="submit" value="text1">
<input id="button2" type="submit" value="text2">
<input id="button3" type="submit" value="text3">

၎င်းတို့အား ကိန်ရှင်များထဲသို့ ရယူကြမည်။

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');

ထိုခလုတ်များအား တူညီသော ဖန်ရှင်တစ်ခုတည်းဖြင့် ချိတ်ဆက်ကြမည်။

button1.addEventListener('click', func);
button2.addEventListener('click', func);
button3.addEventListener('click', func);

ဖန်ရှင်အတွင်း၌ this.value ကို ထုတ်ပြကြမည်။

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

ရလဒ်အနေဖြင့် ကျွန်ုပ်တို့တွင် ခလုတ်သုံးခု ရှိလာမည်။ ခလုတ်တစ်ခုစီကို နှိပ်ခြင်းသည် func ဖန်ရှင်အား ခေါ်ယူမည် ဖြစ်သည်။ ထိုသို့ဖြင့် ကလစ်တစ်ချက်စီတိုင်း၌ this သည် အဖြစ်အပျက်ဖြစ်ပွားသော ခလုတ်အား �ွှန်ပြသော လင့်ခ်တစ်ခုပါရှိမည် ဖြစ်သည်။

ဆိုလိုသည်မှာ နှိပ်ချက်တိုင်းသည် console တွင် နှိပ်ချက်ဖြစ်ပွားသော ခလုတ်၏ value ကို ထုတ်ပြမည် ဖြစ်သော်လည်း ထိုသို့ပြုလုပ်သည်မှာ တူညီသော func ဖန်ရှင်တစ်ခုတည်းသာ ဖြစ်သည်။ ဤသည်တို့မှာ this ကို အသုံးပြုခြင်း၏ အကျိုးကျေးဇူးပင်ဖြစ်သည်။

မည်သည့်စာသားများဖြင့်မဆို ဖြည့်စွက်ထားသော 5 စာပိုဒ်များ ရှိသည်။ မည်သည့်စာပိုဒ်ကိုမဆို ကလစ်နှိပ်လိုက်သောအခါ ၎င်း၏စာသားအဆုံး၌ အာမေဋိတ်အမှတ်အသားကို ရေးထည့်ပါ။

မည်သည့်ကိန်းဂဏန်းများဖြင့်မဆို ရေးသားထားသော 3 input များ ရှိသည်။ မည်သည့် input တွင်မဆို focus ပျောက်သွားသောအခါ ၎င်းအတွင်းရှိ ကိန်းကို နှစ်ထပ်ကိန်း တင်ပါ။