“this” keyword in JavaScript

this keyword ဆိုတာ object တစ်ခုဖြစ်ပါတယ်။ တစ်နည်းအားဖြင့် this ကို global object လို့လည်းဆိုပါတယ်။ ဘာကြောင့်လည်းဆိုတော့ this က သူရောက်ရှိနေတဲ့နေရာရဲ့ တစ်ခုလုံးကို ညွန်းထာတဲ့ object ဖြစ်ပါတယ်။ ဥပမာ window browser မှာ this ကို console လုပ်တယ်ဆိုပါဆို ဒါဆိုသူက window object တစ်ခုလုံးကို output ထုတ်ပေးပါလိမ့် မယ်။

    console.log(this); // Window{}
    console.log(this===window);// true

အကယ်၍ this keyword ကို object ထဲမှာသုံးမယ်ဆိုရင် အဲ့ဒီ this က အဲ့ဒီ ojbect ကိုရည်ညွန်းပါတယ်။ ဥပမာ

    let user = {
        name : "Mg Mg",
        age :21,
        address: "Yangon",
        family : ["U Ba","Daw Mya","Hla Hla"],
        getObj : function(){
          console.log(this);
          console.log(this===user);
        }
      }
      user.getObj(); // user{} , true
       

ဒီလိုဆိုရင် သူက user object တစ်ခုလုံးကို output ထုတ်ပေးပါလိမ့်မယ်။ this keyword ကို user ဆိုတဲ့ object ထဲမှာသုံးထားတဲ့အတွက် this က user object တစ်ခုလုံးကို ရည်ညွန်းပါတယ်။ ဒါကြောင့် နောက်တစ်ကြောင်းက true ထွက်ပါလိမ့်မယ်။ ဘာကြောင့်လည်းဆိုတော့ user object က this keyword နဲ့ ညီသွားလို့ပါ။

 
    user.getObj(); // user{} ,true
    console.log(this) ; // Window{}    

ဒီလိုဆိုရင် အပေါ်တစ်ကြောင်းက user object ထဲက getObj method ကို သုံးထာတဲ့ အတွက် getObj() ရဲ့ statement အရ user object နဲ့ true ကို output ထုတ်ပေးပြီး နောက်တစ်ကြောင်းက Window browser ပေါ်မှာ this ကို ထုတ်ထား တာကြောင့် Window object ကို output ထုတ်ပေးပါတယ်။ user object မှာ နောက်ထပ် method တစ်ခု ထပ်ထည့်ပါမယ်။

 
    let user = {
        name : "Mg Mg",
        age :21,
        address: "Yangon",
        family : ["U Ba","Daw Mya","Hla Hla"],
        getObj : function(){
          console.log(this);
          console.log(this===user);
        },
        getName: function(){
          console.log(this.name);
        }
      }
      user.getName(); // Mg Mg      

ဒီလိုဆိုရင် Mg Mg ဆိုပြီးရပါလိမ့်မယ်။ ဘာကြောင့်လည်းဆိုတော့ name က user ရဲ့ property တစ်ခုဖြစ်ပြီး this.name က သဘောတရားအရ user.name နဲ့တူတာကြောင့် “Mg Mg” ဆိုပြီး output ထုတ်ပေးတာဖြစ်ပါတယ်။ နောက်ထပ် method တစ်ခု ရေးပါမယ်။

    getAge : function(){
        console.log(`${this.name} is ${this.age} years old.`);
      }
    user.getAge(); // Mg Mg is 21 years old  

ဖော်ပြလိုပါ code ကိုပဲ ရေးထားပါတယ်။ ဒီမှာဆိုရင် “Mg Mg is 21 years old ” ဆိုပြီး output ထွက်ပါလိမ့်မယ်။ name နဲ့ ‌age က user object ရဲ့ properties တွေ ဖြစ်တဲ့အတွက် this.name နဲ့ this.age က သူတို့ရဲ့ values ထုတ်ပေးပါလိမ့်မယ်။ ဒီမှာဆို template strings နဲ့ output ထုတ်ထားပါတယ်။ template strings ဆို တာ backtick(``)(grave accent)character ထဲမှာထည့်ရေးတာကိုဆိုလိုတာပါ။ template strings နဲ့ရေးတဲ့အတွက် output ပြချင်တဲ့ expression တွေကို ${} ထဲမှာရေးရပါတယ်။

    ${expression} 

အရင်တုန်းက “” or ‘’(double quotes or single quotes)သုံးကြပါတယ်။ အပေါ်က method ကိုပဲ ဥပမာပြန်ထုတ်ပါ့မယ်။

    getAge : function(){
        console.log(this.name +" is " + this.age + " years old.");
      }

user.getAge(); // Mg Mg is 21 years old ဒီမှာဆိုရင် စာတွေကို “ ”(double quotes) ထဲထည့်ပြီး JavaScript ရဲ့ concatenation sign(+) တွေနဲ့ ရေးထားပါတယ်။ ဒီလို “”(double quotes) နဲ့ template string နဲ့ ရေးတာ output ကတူတူပါပဲ ။ this keyword ကို object ရဲ့ method မှာသုံးရင် သတိထား ရမှာ ရှိပါတယ်။ ဒီမှာ သတိထား ကြည့်မယ်ဆို object method တွေကို ရိုးရိုးပဲ ရေးထားပါတယ် ။ arrow function ကို မသုံးထားပါဘူး။ ဘာကြောင့်လဲဆိုတော့ arrow function က this ကို lexical အနေနဲ့ပဲသိပါတယ်။ ဒါကြောင့်

    getAge :()=> {
        console.log(`${this.name} is ${this.age} years old.`);
      }
    user.getAge(); // undefined is undefined years old.
    ဒီလိုဆို undefined is undefined years old.ဆိုပြီးပဲ ထွက်ပါလိမ့်မယ်။ 
    getAge :()=> {
        console.log(`${this.name} is ${this.age} years old.`);
        console.log(this);
      }
    user.getAge(); // undefined is undefined years old.
                // window{}    

ဒါကြောင့် arrow function ကို သုံးရင် arrow function က this ကို သူရဲ့ အပေါ် ဖုံးထာတဲ့ (outer) အပြင်ကို ကိုပဲသိပါတယ်။ အပြင်ကိုပဲ ညွန်းပါတယ်။ ဒါကြောင့် arrow function နဲ့ this keyword ကို object ထဲမှာ သုံးမယ်ဆိုရင် သတိထားရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် object ထဲမှာ this keyword နဲ့ method ကိုသုံးမယ်ဆိုရင် shorten ပုံစံ တွေနဲ့ရေးပါတယ်။ code အပြည့်စုံပါ။

 
 
    let user = {
        name : "Mg Mg",
        age :21,
        address: "Yangon",
        family : ["U Ba","Daw Mya","Hla Hla"],
        getObj(){
          console.log(this);
          console.log(this===user);
        },
        getName(){
          console.log(this.name);
        },
        getAge(){
          console.log(this.name +" is " + this.age + " years old.");
        },
        getFamily(){
          console.log(`${this.name}'s family members are`)
          this.family.forEach(member=>{
            console.log(member);
          })
        }
      }
      user.getFamily();