JavaScript Arrow Function
Arrow လုပ်ဆောင်ချက်များကို ES6 တွင် မိတ်ဆက်ခဲ့သည်။
Arrow လုပ်ဆောင်ချက်များသည် ကျွန်ုပ်တို့အား ပိုတိုသော function syntax ရေးနိုင်စေသည်-
let myFunction = (a, b) => a * b;
အရင်က
hello = function() {
return "Hello World!";
}
Arrow Function ဖြင့်
hello = () => {
return "Hello World!";
}
ပိုတိုလာသည်။ လုပ်ဆောင်ချက်တွင် ဖော်ပြချက်တစ်ခုသာ ရှိပြီး ထုတ်ပြန်ချက်သည် တန်ဖိုးတစ်ခု ပြန်ပေးပါက၊ သင်သည် ကွင်းစကွင်းပိတ် နှင့် သော့ချက်စာလုံး ကို
ဖယ်ရှားနိုင်သည် return
-
Arrow Functions များသည် Default အားဖြင့် Return Value:
hello = () => "Hello World!";
မှတ်ချက်- လုပ်ဆောင်ချက်သည် ဖော်ပြချက်တစ်ခုသာရှိမှသာ ၎င်းသည် အလုပ်လုပ်သည်။
သင့်တွင် ဘောင်များရှိပါက၊ ၎င်းတို့ကို ကွင်းအတွင်း၌ ဖြတ်သွားသည်-
Parameters များဖြင့် Arrow Function
hello = (val) => "Hello " + val;
တကယ်တော့၊ သင့်တွင် ကန့်သတ်ချက်တစ်ခုသာ ရှိပါက၊ သင်သည် ကွင်းစဥ်များကို ကျော်သွားနိုင်သည်။
ဘာလဲ this
?
ပုံမှန် လုပ်ဆောင်ချက်များ this
နှင့် နှိုင်းယှဉ်ပါက မြှားလုပ်ဆောင်ချက်များတွင်လည်း ကွဲပြားပါသည်။
အတိုချုပ်ပြောရလျှင်၊ မြှားလုပ်ဆောင်ချက်များဖြင့် စည်းနှောင်မှုမရှိပါ
this
။
ပုံမှန်လုပ်ငန်းဆောင်တာများတွင် this
သော့ချက်စကားလုံးသည် ဝင်းဒိုး၊ စာရွက်စာတမ်း၊ ခလုတ် သို့မဟုတ် မည်သည့်အရာဖြစ်နိုင်သည်ဟူသော လုပ်ဆောင်ချက်ဟုခေါ်သော အရာတစ်ခုကို ကိုယ်စားပြုသည်။
မြှားလုပ်ဆောင်ချက်များဖြင့် this
သော့ချက်စာလုံး သည် မြှားလုပ်ဆောင်ချက်ကို သတ်မှတ်ပေးသည့် အရာဝတ္ထုကို အမြဲတမ်း ကိုယ်စားပြုသည်။
ခြားနားချက်ကို နားလည်ရန် ဥပမာနှစ်ခုကို ကြည့်ကြပါစို့။
နမူနာနှစ်ခုလုံးသည် နည်းလမ်းတစ်ခုအား နှစ်ကြိမ်ခေါ်ဆိုသည်၊ ပထမအကြိမ် စာမျက်နှာဖွင့်သည့်အခါ၊ အသုံးပြုသူသည် ခလုတ်တစ်ခုကို နှိပ်သည့်အခါ နောက်တစ်ကြိမ်ခေါ်သည်။
ပထမဥပမာသည် ပုံမှန်လုပ်ဆောင်ချက်ကိုအသုံးပြုပြီး ဒုတိယဥပမာသည် မြှားလုပ်ဆောင်ချက်ကိုအသုံးပြုသည်။
ရလဒ်သည် ပထမနမူနာတွင် မတူညီသော အရာနှစ်ခု (ပြတင်းပေါက်နှင့် ခလုတ်) ကို ပြန်ပေးကြောင်းပြသပြီး ဒုတိယဥပမာသည် ဝင်းဒိုးအရာဝတ္တုကို နှစ်ကြိမ်ပြန်ပေးသည်၊ အဘယ်ကြောင့်ဆိုသော် ဝင်းဒိုးအရာဝတ္တုသည် လုပ်ဆောင်ချက်၏ "ပိုင်ရှင်" ဖြစ်သောကြောင့် ဖြစ်သည်။
ဥပမာ
ပုံမှန် function တစ်ခုဖြင့် function ကို ခေါ်this
သည့်အရာဝတ္ထုကိုကိုယ်စားပြုသည် -
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
ဥပမာ
မြှားလုပ်ဆောင်ချက်ဖြင့် လုပ်ဆောင်ချက် ၏ ပိုင်ရှင်ကိုthis
ကိုယ်စားပြုသည်
-
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
လုပ်ဆောင်ချက်တွေနဲ့ အလုပ်လုပ်တဲ့အခါ ဒီကွဲပြားမှုတွေကို မှတ်သားထားပါ။ တစ်ခါတစ်ရံတွင် ပုံမှန်လုပ်ဆောင်ချက်များ၏ အပြုအမူသည် သင်အလိုမရှိလျှင် မြှားလုပ်ဆောင်ချက်များကို အသုံးပြုပါ။
Browser ပံ့ပိုးမှု
အောက်ပါဇယားသည် JavaScript ရှိ Arrow Functions အတွက် အပြည့်အဝပံ့ပိုးမှုဖြင့် ပထမဆုံးဘရောက်ဆာဗားရှင်းများကို သတ်မှတ်ဖော်ပြသည်-
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |