Factory vs Constructor

Factory Function

JavaScript မှာဆိုရင် function တိုင်းက object တစ်ခု ကို return ပြန်နိုင်ပါတယ် ။function တစ်ခုက class လည်းမဟုတ် constructor လည်းမဟုတ်ဘဲနဲ့ object ကို return ပြန်တဲ့ function မျိုးကို factory function လို့ခေါ်ပါတယ်။

    Example 
    function person(firstName, lastName, age) {
      const person = {};
      person.firstName = firstName;
      person.lastName = lastName;
      person.age = age;
      return person;
    }
     
    let newPerson = person(‘John’,’Smith’,21);
    console.log(newPerson.firstName); // “John”
    console.log(typeof newPerson); // object

ဒီမှာကြည့်မယ်ဆိုရင် person ဆိုတဲ့ function ထဲမှာ object တစ်ခုဆောက်ထားပါတယ်။ person function ကရတဲ့ arguments တွေကို object ရဲ့ properties တွေအဖြစ်ယူပြီး object တစ်ခုကို return ပြန်စေပါတယ်။ နောက်ပြီးperson function က object အဖြစ်လုပ်ဆောင်ပါတယ်။ type တူတဲ့ objects တွေ အများအပြား ဆောက်ချင်တဲ့ အခါမျိုးတွေ မှာ factory function မျိုးတွေကို သုံးလေ့ရှိပါတယ် ။ ဒီမှာဆိုရင် person နဲ့ type တူတဲ့ object မျိုး ဆောက်ချင်တဲ့ person ကို instance ယူပြီးတော့ newPerson ဆိုတဲ့ object variable လေးတစ်ခု ဆောက်ထား ပါတယ်။ အဲ့ဒါကြောင့် newPerson.firstName ဆိုပြီး output ထုတ်တဲ့အခါမှာ argument မှာပေးခဲ့တဲ့အတိုင်း “John” ဆိုပြီးထွက်လာပါတယ်။

Constructor Function

Constructor function က factory function နဲ့ အနည်းငယ်ဆင်ပါတယ်။ function လုပ်ဆောင်ပုံချင်းဆင်ပေမဲ့ ကွဲပြားတာတွေရှိပါတယ်။

    Example 
    function User(name,age,address){
    this.name = name;
    this.age = age;
    this.address = address;
    }
    const userOne = new User(‘Mg Mg’,21,’Yangon’);
    console.log(useOne.name); //”Mg Mg”

ဒါက constructor function sample ပါ။ ဒီမှာဆိုရင် သူက function name ကို အကြီး နဲ့ ရေးရပါတယ်။ သူရဲ့ properties တွေကို လည်း this နဲ့ရေးပါတယ်။ သူ့ကို ပြန်ပြီး instance ယူချင်တဲ့အခါ မှာ new keyword ကို သုံးရပါတယ်။ အဲ့ဒီ new keyword ရဲ့ လုပ်ဆောင်ပုံတွေရှိပါတယ်။ ၁။ အရင်ဆုံး blank တစ်ခု JavaScript object အလွတ်တစ်ခု တည်ဆောက်ပါတယ်။ ၂။ မူရင်း object ကနေ နောက်ထပ် object ကို link ချိတ်ပေးပါတယ်။(မူရင်းobject ဆိုတာ instance လုပ်ခြင်းခံရတဲ့ object ကိုဆိုလိုတာပါ။) ၃။ အချက်(၁) အရဆောက်ထားတဲ့ object အသစ်ကို this အဖြစ်‌ပြောင်းသွားစေပါတယ်။ ၄။ this ကို return ပြန်ပါတယ်။ ဒီ အပေါ်က အချက်တွေက constructor function နဲ့အတူ new operator ကို သုံးလိုက်တဲ့ အချိန် နောက်ကွယ်က JavaScript engine လုပ်ဆောင်သွားတာတွေပါ။

    function user(name,age,address) {
        // this = {};
        // this.__proto__ = User.prototype;
        //After logic:returns this
        // instead of that item at
        //the return statement;
        this.name = name;
        this.age = age;
        this.address = address;
        // return this;
    }
     

သ‌ဘောက အရင်ဆုံး this keyword ကို မှီပြီးတော့ object တစ်ခု အသစ်ဆောက်ပါတယ်။ နောက်တော့ object ရဲ့ _proto_ အထဲမှာ constructor ရဲ့ prototype ထည့်လိုက်ပါတယ်။ နောက်ပိုင်းမှာ prototype အကြောင်းရှင်းပြပါမယ့်။ ဒီတိုင်းလေးပဲမှတ်ထားပေးပါ။ နောက်ပြီး သူက logic တစ်ခုစစ်ပါတယ်။ အဲ့ဒီ logic က ဘာလဲဆိုတော့ ဒီ constructor function body ထဲမှာ return တစ်ခုပြန်ထားပါတယ်။ အဲ့ဒီ retrurn က object လည်းမဟုတ် array လည်း မဟုတ် function လည်းမဟုတ်ကြောင်း စစ်ပြီး ကျနော်တို့ အသစ်ဆောက်လိုက်တဲ့ constructor object ကို ရည်ညွန်းတဲ့ this ကို return ပြန်ပါတယ်။ ဒီနေရာမှာဆိုရင် User ကို instance လုပ်ပြီး အသစ်ဆောက်လိုက်တဲ့ constructor object userOne ကို new က this အဖြစ် return ပြန်လိုက်ခြင်းကို ဆိုလိုပါတယ်။ အတွင်းပိုင် လုပ်ဆောင်ချက်ဖြစ်လို့ နည်းနည်း ရှုပ်နိုင်ပါတယ်။ JavaScript မှာဆိုရင် function တိုင်းကို new operator နဲ့ ခေါ်လို့ရပါတယ်။ အခု constructor ကိုလည်း new operator နဲ့ခေါ်ရသလို မခေါ်တာမျိုးလည်းရှိပါတယ်။

    Example 
    function User(name,age,address){
    this.name = name;
    this.age = age;
    this.address = address;
    }
    const userOne = new User(‘Mg Mg’,21,’Yangon’);
    const userTwo = User('Hla Hla', 18,'Mandalay');
    console.log(userOne); // userOne{}
    console.log(userTwo); // undefined

ဒီမှာဆိုရင် new keyword ကို သုံးတဲ့ userOne constructor object က object ကို ပြန်ရပါတယ်။ new keword ကို မသုံးတဲ့ userTwo က undefined ဆိုပြီးရပါတယ်။ ဘာကြောင့်လည်း ဆိုတော့ new keyword ကို မသုံးတဲ့ အတွက် this ရဲ့ သဘောတရားအရ အသစ်ဆောက်လိုက်တဲ့ userTwo construct ကို မညွန်းတော့ပဲ global or window object ရဲ့ properties တွေဖြစ်သွားပါတယ်။ window.name ; // “Hal Hla” window.age ;// 18 ဒီမှာ JavaScript engine က new operator နဲ့မလုပ်ဆောင်တဲ့ constructor function တွေကို ရှင်းလင်းတဲ့ အဖြေကို return မပြန်တော့ပဲ interpret ဖြစ်သွားတဲ့အတွက် regular function အတိုင်းသတ်မှတ်ပြီး သူလုပ်ဆောင်ချက်နဲ့မညီတဲ့ function တွေကို retrun ပြန်တဲ့အတိုင်း undefined ပဲ return ပြန်ပါတယ်။ ဒါကြောင့် userTwo က အဲ့ဒီ property တွေကို မပိုင်တဲ့အတွက် undefined အဖြစ် output ထွက်ပါတယ် ။ ဒါကတော့ JavaScript မှာ new operator ရဲ့ အဓိက လုပ်ဆောင်ချက်တွေပဲဖြစ်ပါတယ်။ Constructor Function ကို Arrow Function နဲ့ ပြန်ပြင်ရေးပေးခဲ့ပါအုံခမျ။ နောက်ပြီး constructor function အတွင်းမှာ arrow function ပုံစံနဲ့ method လေးတစ်ခုထည့်းပေးပါအုံးခမျ။