Category: JavaScript/ES6

Arrow Functions and this

By Set Kyar Wa Lar 1 year ago
post image

အရင် Article မှာ arrow function အကြောင်းရေးသားခဲ့ပါတယ်။ အခုရေးသားမယ့် အကြောင်းအရာကတော့ arrow function ကသူ့ကိုယ်ပိုင် this ကို bind မလုပ်ဘူးဆိုတာကိုဘဲဖြစ်ပါတယ်။ ဘယ်လိုမျိုးဟာကို ပြောတာလဲဆိုတာသိအောင် အောက်ဖော်ပြပါ နမူနာ code block ကိုကြည့်လိုက်အောင်…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow Function and this</title>
</head>
<body>
    <div class="hello">
        <p>Hello World</p>
    </div>

    <script>
        const hello = document.querySelector('.hello>p');
        hello.addEventListener('click', () => {
            console.log(this);
        })
    </script>
</body>
</html>

အထက်ဖော်ပြပါ code မှာဆိုရင် .hello>p ကိုနှိပ်ရင် this ကို console.log လုပ်ထားပါတယ်။ အဲ့ဒီ့ this ကပုံမှန် function မှာဆိုရင် .hello>p ဖြစ်မှာဖြစ်ပေမယ့် arrow function မှာဆို parent scope ဖြစ်တဲ့ windowကို return ပြန်မှာဖြစ်ပါတယ်။

...
<script>
const hello = document.querySelector('.hello>p');
hello.addEventListener('click', function(){
    console.log(this);
})
</script>
...

အထက်ဖော်ပြပါ code block လိုပုံမှန် function နဲ့ရေးပြီး .hello>p ကိုနှိပ်လိုက်ရင် this က <p>Hello World</p> ဆိုပြီးရရှိမှာဘဲဖြစ်ပါတယ်။

Syntax တိုလို့အမြဲတမ်း arrow function ကိုဘဲ မသုံးသင့်ပါဘူး။ သူ့မှာလည်းသူ့အားနည်းချက်နဲ့သူရှိပါတယ်။ Arrow Function အကြောင်းဒီထက်အသေးစိတ်ကို ပိုသိဖို့ရာအတွက် MDN မှာသွားဖတ်ကြည့်သင့်ပါတယ်။

ဒီနေ့ article ကတော့ ဒီလောက်ပါပဲ။ နောက် article တွေမှာဆက်လတ်လေ့လာလိုက်ကြရအောင်။

I am Set Kyar Wa Lar

Follow me on Github or Twitter

Set Kyar Wa Lar
Set Kyar Wa Lar

About Author Section! Coming soon :)