Using a Constructor Function

ဒီတစ်ခါတော့ Constructor Function တွေကို အသုံးပြုပြီး အခြေခံကျတဲ့ Operations တွေ တည်ဆောက်ကြည့်ရအောင်

function myObject(){
         this.iAm = 'an object';
         this.whatAmI = function(){
                  alert('I am ' + this.iAm);
         };
};

အဲဒီ အပေါ်က function ကို နောက်တစ်ဆင့် ထပ်တိုးပါ့မယ်။

function myObject(what){
         this.iAm = what;
         this.whatAmI = function(language){
                 alert('I am ' + this.iAm + ' of the ' + language + ' language');
         };
};

Object Constructors နဲ့ Object Literals ရဲ့ ကွာခြားချက်ကို အရင်ပို့စ်မှာ ရှင်းခဲ့ပြီး ဖြစ်ပါတယ်။ Object Literal ကို အပြောင်းအလဲ တစ်ခုလုပ်လိုက်ရင် Script တစ်ခုလုံးကို အကျိုးသက်ရောက်သွားစေပြီး Constructor function တစ်ခုကို instantiate (Property တွေ Method တွေအတွက် မတူညီတဲ့ Object တွေ ဖန်တီးခြင်း) လုပ်ရင် အဲဒီ instantiate လုပ်လိုက်တဲ့ Object ကိုပဲ အကျိုးသက်ရောက် စေပါတယ်။ အဲဒီ Object ရဲ့ အခြား instances တွေကို အကျိုးသက်ရောက်မှု မရှိပါဘူး။ ဥပမာအနေနဲ့ ရေးကြည့်ရအောင်

var myObjectLiteral = {
           myProperty : 'this is a property'
        }

        //alert current myProperty
        alert(myObjectLiteral.myProperty); // this will alert 'this is a property'

        // change myProperty
        myObjectLiteral.myProperty = 'this is a new property';

        // alert current myProperty
        alert(myObjectLiteral.myProperty);  //this will alert ' this is a new property', as expected

Variable အသစ်တစ်ခုကို Object ထဲ ထည့်ပေးသော်ငြားလည်း သက်ရောက်မှုကတော့ အတူတူပဲ ဖြစ်နေမှာပါ။

var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //define new variable with object as value
    var sameObject = myObjectLiteral;

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

ဒီတစ်ခါတော့ Constructor function နဲ့ တည်ဆောက်ကြည့်ရအောင်

//this is one other way of creating a Constructor function
var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

အပေါ်က အတိုင်းရေးရင်တော့ နှစ်ခုလုံး မှန်ကန်တဲ့ တန်ဖိုးပဲ ပြန်ရတယ်လို့ ထင်စရာရှိပါတယ်။ ဒီတစ်ခါတော့ myProperty ရဲ့ တန်ဖိုးကို instance တစ်ခုမှာ ပြောင်းပြီး စမ်းကြည့်ရအောင်

//this is one other way of creating a Constructor function
var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

အဲဒီ အပေါ်က ဥပမာ အရဆိုရင် constructorOne ရဲ့ property ကို ပြောင်းလိုက်သော်လည်း myObjectConstructor ကို သက်ရောက်မှု မရှိပါဘူး။ ဒါကြောင့် constructorTwo ကိုလည်း သက်ရောက်မှု မရှိပါဘူး။ constructorOne ရဲ့ myProperty ကို ပြောင်းလဲပြီးမှ constructorTwo ကို instantiate လုပ်လည်း constructorTwo ကို သက်ရောက်မှု မရှိပါဘူး။ ဒီတော့ constructorOne နဲ့ constructorTwo က Javascript နဲ့ ပတ်သက်ပြီး သိမ်းထားတဲ့ Memory မှာ သီးခြားစီ ဖြစ်နေပါတယ်။ သီးခြား instance အနေနဲ့ ရပ်တည်ကြပါတယ်။

Constructor function နဲ့ Object Literal ဘယ်ဟာသုံးမလဲ။ ဒါကတော့ အခြေအနေအပေါ် မူတည်မှာ ဖြစ်ပါတယ်။ Object တစ်ခုတည်းကို သုံးချင်တယ် instance တွေလည်း ထပ်မခွဲချင်ဘူးဆိုရင် Object Literal ကို သုံးပါ လို့ ဆိုရမှာ ဖြစ်သလို instance တွေ အများကြီး ခွဲသုံးချင်တယ် ဆိုရင်တော့ Constructor function ကို သုံးပါလို့ ဆိုရမှာ ဖြစ်ပါတယ်။ သီးခြား Property၊ သီးခြား Method တွေနဲ့ Object ကို သုံးချင်တယ် ဆိုရင်တော့ Constructor Function ကို သုံးရမှာ ဖြစ်ပါတယ်။

This and That

Constructor function အကြောင်း ရှင်းတဲ့နေရာမှာ ‘this’ ဆိုတဲ့ keyword တွေ နေရာတကာ ပါနေတာ တွေ့ရပါလိမ့်မယ်။ အဲဒီ this အကြောင်း ဆက်ရှင်းပါ့မယ်။

javascript ရဲ့ Function/Object တွေမှာ Function ရဲ့ ပြင်ပကနေ အဲဒီ Function ထဲက Variable တွေကို ခေါ်သုံးလို့ မရပါဘူး။ ဒါပေမယ့် Function ထဲက Function တွေအနေနဲ့ကတော့ Parent Function ရဲ့ Variable တွေကို ခေါ်သုံးခွင့်ရှိပါတယ်။ နမူနာ အနေနဲ့ ကြည့်ရအောင်

<script type="text/javascript">

var var1 = 'this is global and is available to everyone';

function function1(){

	var var2 = 'this is only available inside function1 and function2';

	function function2(){

		var var3 = 'this is only available inside function2';

	}

}

</script>

အပေါ်က code မှာ ဆိုရင် var1 က Global Object အနေနဲ့ ကြော်ငြာထားပြီး အတွင်းမှာ Object အတွင်းမှာ ရှိတဲ့ function နဲ့ object တိုင်းက ခေါ်လို့ ရပါတယ်။ var2 ကတော့ function1 ထဲမှာ သတ်မှတ်ထားတဲ့ အတွက် function1 နဲ့ function2 က သုံးလို့ရမှာ ဖြစ်ပါတယ်။ ဒါပေမယ့် function1 ရဲ့ ပြင်ပမှာ ရှိတဲ့ Global Object ကနေ ခေါ်လို့မရပါဘူး။ အဲဒီလို ခေါ်သုံးမယ်ဆိုရင်တော့ ‘var2 is undefined’ ဆိုပြီး Error တက်လာပါလိမ့်မယ်။ var3 ကတော့ function2 ကသာ သီးသန့် သုံးလို့ရမှာ ဖြစ်ပါတယ်။

ကဲဒီတော့ ‘this’ ဆိုတာ ဘယ်နားမှာ သုံးတာလဲဆိုတဲ့ ပြန်ဆက်ရအောင်။ Browser ထဲမှာ ဆိုရင်တော့ ‘this’ ဆိုတာ Window Object ကို ညွှန်းတာ ဖြစ်ပါတယ်။ Window Object က Global Object ပေါ့။ အကယ်ရဲ့ Object အတွင်းမှာ ‘this’ ကို သုံးရင်တော့ အဲဒီ Object ကို ပြန်ညွှန်းတာ ဖြစ်ပြီး function အတွင်းမှာဆိုရင်တော့ ထုံးစံအတိုင်း Window Global Object ကို ညွှန်းတာ ဖြစ်ပါတယ်။ အဲဒီလိုပဲ Method တွေထဲမှာ ‘this’ ကို သုံးမယ်ဆိုရင်တော့ အဲဒီ Method ရဲ့ ပိုင်ရှင် Object ကိုညွှန်းတာ ဖြစ်ပါတယ်။

sub-object (Object ထဲက Object) တွေမှာ ‘this’ ကို သုံးမယ်ဆိုရင်တော့ အဲဒီ ‘this’ က sub-object ကိုသာ ညွှန်းတာဖြစ်ပြီး Parent Object ကို မညွှန်းပါဘူး။

function တွေဖြစ်တဲ့ setinterval တို့လို setTimeout တို့လို eval တို့လို့ တွေအတွက်တော့ function တွေထဲမှာပဲ ထည့်ထည့် Method ကပဲ ခေါ်သုံးသုံး ‘this’ က Window Object ကိုသာ ညွှန်းပါတယ်။

ဒါကြောင့် setinterval() နဲ့ window.setinterval() က အတူတူပါပဲ။

နောက်တစ်ပိုင်းမှာတော့ တကယ့် Real World နမူနာနဲ့ Object တွေကို စမ်းကြည့်ရအောင်

One Response

1. Nay Min says:

   April 25, 2011 at 11:57 AM

   I think you should explain things like name spacing (through object literals), prototypal inheritance, DOM manipulation and event handling (‘this’ keyword resolving, reflows, event delegations, memory leaks etc), and some other common mistakes and pitfalls as you continues. These are all common in writing Component-based javascript controls. Good work with your tutorials. Cheers and keep it up!

   Reply