Category: JavaScript/ES6

Arrow Functions and this

By Set Kyar Wa Lar 11 months 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 :)