JavaScript တွင် Arrow Event Handler အတွက် this အမှားအယွင်း

ခေတ်သစ်တွင် သာမန်အသုံးပြုမှုများအစား နေရာတိုင်း arrow functions များကိုအသုံးပြုခြင်းသည် ခေတ်စားလာပါသည်။ သို့ရာတွင် ထိုအရာများတွင် လှည့်ကွက်တစ်ခုရှိသည် - ၎င်းတို့သည် this ကို မသိမ်းဆည်းပေးပါ။ ဤအချက်ကြောင့် မည်သည့်ပြဿနာများနှင့် ရင်ဆိုင်ရနိုင်သည် ဆိုတာကို ကြည့်ရအောင်။

ကျွန်ုပ်တို့တွင် button တစ်ခုရှိသည်ဆိုပါစို့။

<button>text</button>

ထို button အတွက် reference တစ်ခုကို variable တစ်ခုထဲရယူမည်။

let button = document.querySelector('button');

Arrow function တစ်ခုကို အသုံးပြု၍ button အပေါ်တွင် event handler တစ်ခုချိတ်ဆက်မည်။

button.addEventListener('click', () => {
	console.log(this.textContent);
});

ဤနေရာတွင် အံ့အားသင့်စရာတစ်ခုက ကျွန်ုပ်တို့ကို စောင့်ကြိုနေပါသည်။ Arrow function အတွင်းရှိ this သည် event ဖြစ်ပွားသော element နှင့် သက်ဆိုင်မည် မဟုတ်ပါ။

ဤအရာနှင့် ဘာလုပ်နိုင်သည်ကို ကြည့်ရအောင်။

ပထမဆုံးဖြေရှင်းချက်

this အသုံးပြုခြင်းကို ရပ်တန့်ပြီး event ချိတ်ဆက်ထားသော variable ကိုအသုံးပြုနိုင်သည်။

button.addEventListener('click', () => {
	console.log(button.textContent);
});

ဒုတိယဖြေရှင်းချက်

event.target မှတစ်ဆင့် event ချိတ်ဆက်ထားသော element ကို ရယူနိုင်သည်။

button.addEventListener('click', (event) => {
	console.log(event.target.textContent);
});

တတိယဖြေရှင်းချက်

Arrow function အစား သာမန် function တစ်ခုကို အသုံးပြုနိုင်သည်။

button.addEventListener('click', function() {
	console.log(this.textContent);
});