JavaScript ရှိ bind နည်းလမ်းဖြင့် context ချိတ်ဆက်ခြင်း

နောက်ထပ်နည်းလမ်း bind သည် function တစ်ခုအတွင်းရှိ context ကို အမြဲတမ်းချိတ်ဆက်ရန် ခွင့်ပြုပေးပါသည်။ ဤနည်းလမ်း၏ ရလဒ်အဖြစ် အသစ်ဖြစ်သော function တစ်ခုကို ပြန်ပေးပြီး ၎င်း၏အတွင်း၌ this သည် ခိုင်မာစွာသတ်မှတ်ထားသော တန်ဖိုးရှိမည်ဖြစ်သည်။

ဥပမာတစ်ခုကို ကြည့်ရအောင်။

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

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

ဤ input သို့ လင့်ခ်တစ်ခုကို variable elem ထဲတွင် ရေးထားသည်ဆိုပါစို့။

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

ကျွန်ုပ်တို့တွင် အောက်ပါ function func လည်း ရှိသည်ဆိုပါစို့။

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

အခု bind ကို အသုံးပြု၍ function func ၏ မိတ္တူတစ်ခုဖြစ်သော်လည်း ၎င်းအတွင်း၌ this သည် အမြဲတမ်း elem နှင့် ညီမျှမည့် အသစ်သော function တစ်ခုကို ပြုလုပ်ကြည့်ရအောင်။

javascriptlet newFunc = func.bind(elem);

ယခုအခါ variable newFunc ထဲတွင် function တစ်ခု ရှိနေပါပြီ။ ၎င်းကို ခေါ်ယူကြည့်ပြီး ပထမ parameter အနေဖြင့် '1' နှင့် ဒုတိယ parameter အနေဖြင့် '2' ကို ပေးကြည့်ရအောင် (သတိရပါ၊ elem ထဲတွင် value သည် 'text' နှင့် ညီမျှသော input ရှိပါသည်)။

javascriptnewFunc('1', '2');

အားလုံးကို စုစည်းကြည့်ရအောင်။

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // 'text12' ကို ဖော်ပြမည်

bind ၏ အလုပ်လုပ်ပုံရလဒ်ကို အသစ်သော function newFunc ထဲသို့ ရေးရန်မလိုအပ်ပါ၊ func ကို ပြန်ရေးလိုက်ရုံသာဖြစ်သည်။ ထိုနောက် func သည် ယခင်အတိုင်းဖြစ်သော်လည်း this နှင့် ခိုင်မာစွာ ချိတ်ဆက်ထားသော function တစ်ခုဖြစ်လာမည်။

javascriptfunc = func.bind(elem);

html<input id="elem" value="hello">

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// ဤနေရာတွင် bind() နှင့်အတူ ဖွဲ့စည်းပုံကို ရေးပါ

func('John', 'Smit'); // ဤနေရာတွင် 'hello, John Smit' ကို ဖော်ပြသင့်သည်
func('Eric', 'Luis'); // ဤနေရာတွင် 'hello, Eric Luis' ကို ဖော်ပြသင့်သည်