JavaScript တွင် call method အသုံးပြု၍ context binding ပြုလုပ်ခြင်း

ဒါဆိုရင် this ဘယ်လိုအလုပ်လုပ်လဲဆိုတာ ကျွန်တော်တို့ လေ့လာပြီးပါပြီ။ အခု ဖြစ်စေချင်သော context (တနည်းအားဖြင့် this ဘာနဲ့ညီမှာလဲဆိုတာ) ကို အတင်းအကြပ် သတ်မှတ်ပေးနိုင်သော methods တွေကို ကြည့်ကြရအောင်။

ကျွန်တော်တို့ ပထမဆုံးလေ့လာမယ့် method ကတော့ call လို့ခေါ်ပါတယ်။ ဥပမာတစ်ခုနဲ့ သူ့အလုပ်လုပ်ပုံကို ကြည့်ကြရအောင်။ ကျွန်တော်တို့မှာ input တစ်ခုရှိတယ်ဆိုပါစို့။

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

ဒီ input ကို reference ယူပြီး elem ဆိုတဲ့ variable ထဲမှာ သိမ်းလိုက်ကြရအောင်။

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

အခု func ဆိုတဲ့ function တစ်ခုလုပ်ပြီး၊ အတွင်းမှာ this.value ကို ထုတ်ကြည့်ကြမယ်။

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

လောလောဆယ် ကျွန်တော်တို့ function က this က ဘာကိုရည်ညွှန်းမှန်း မသိသေးပါဘူး။ addEventListener နဲ့ bind လုပ်ခဲ့ရင်တော့ သိမှာပေါ့။ ဒါပေမယ့် ကျွန်တော်တို့ အဲဒီလိုမလုပ်ပါဘူး။ အဲဒီအစား ကျွန်တော်တို့ function ကို ခေါ်လိုက်မယ်၊ ပြီးတော့ this က elem နဲ့ ညီရမယ်လို့ ပြောပြလိုက်မယ်။

ဒါကို ဒီလိုလုပ်ပါတယ်။ func.call(elem)။ ဒီ code ဟာ function ကို ပုံမှန် func() ဆိုပြီး ခေါ်တာနဲ့ အတူတူပါပဲ။ ဒါပေမယ့် this က elem နဲ့ညီတယ်ဆိုတဲ့ အခြေအနေတစ်ခုနဲ့ပါ။

ဒါဆိုရင် call method ရဲ့ syntax က function.call(object) ဖြစ်ပါတယ်။ အကုန်လုံးကို စုစည်းကြည့်ရအောင်။

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

function func() {
	console.log(this.value); // input ရဲ့ value ကို ထုတ်ပြမည်
}
func.call(elem);

function တစ်ခုပေးထားသည်။

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

input သုံးခု ပေးထားသည်။

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

call method နှင့် func function ကို အသုံးပြု၍ input တစ်ခုစီ၏ value ကို screen ပေါ်တွင် ထုတ်ပြပါ။