Scope in JavaScript (part 1)
(JavaScript မွာရိွေသာ နယ္နိမိတ္ သေဘာတရား) - အပိုင္း ၁

Scope ဆိုတာ JavaScript programming ဘာသာရပ္မွာမွာ အေၿခခံက်တဲ့ အၿမင္ (aspects) တစ္ခုပဲၿဖစ္ပါတယ္။ တစ္ခါတေလ ရွဳပ္ေထြးတဲ့ ပရိုဂရမ္ေတြကို ေရးတဲ့အခါ ဒုကၡအေရာက္ဆံုး အရာလည္းၿဖစ္ႏိုင္ပါတယ္။

JavaScript ပရိုဂရမ္တစ္ပုဒ္ရဲ ့ဘယ္အစိတ္အပိုင္းမဆိုဟာ Execution Context တစ္ခု ဒါမွမဟုတ္ အၿခား Execution Context တစ္ခုထဲ မွာ လုပ္ကိုင္ရပါတယ္။ Execution Context ေတြကို ကၽြန္ေတာ္တို ့ ကုဒ္ေတြပါ၀င္တဲ့ အိမ္နီးနားခ်င္းေတြလို ့ ယူဆႏိုင္ပါတယ္။ ကုဒ္တစ္ေၾကာင္း တိုင္းဟာ သူဘယ္ကေနလာတယ္။ သူ ့ရဲ ့အိမ္နီးနားခ်င္းေတြက ဘယ္သူေတြပါ။ဒါေတြကို ေၿပာၿပပါလိမ့္မယ္။ ဒီ Execution Context ေတြဟာ အေရးၾကီးပါတယ္။သူတုိ ့ကို ပြင္ေန ့တဲ ့၊ ဖြင့္ ထားတဲ့ အပိုင္း အခြဲငယ္ေလးေတြလို ့ယူဆတာထက္၊ အစည္းအတား ရိွတဲ့ ဆက္ သြယ္မွဳ ့နယ္ပယ္ေလးေတြ (gated communities) လို ့ယူဆရင္ပိုေကာင္းမယ္လို ့ ထင္ပါတယ္။

ဒီအစည္းအတား နယ္ပယ္ေတြကို ကၽြန္ေတာ္တို ့က scope လို ့ ေၿပာဆိုၾကတယ္။ သူတို ့ဟာ ဒီ Execution Context တစ္ခုစီရဲ ့ ဥပေဒသ သေဘာသဘာ၀ (Ruls and Laws) ေတြ ရဲ ့သက္ေရာက္မွဳ ့ကို သတ္မွတ္ေပးမွာၿဖစ္လို ့ အေရးၾကီပါတယ္။ ဒါကို Execution Context ရဲ ့ Scope Change လုိ ့ေခၚ ပါတယ္။ Execution Context တစ္ခုထဲမွာ ရိွတဲ့ ကုဒ္ေတြဟာ အဲဒီ Execution Context ရဲ ့ Scope Change မွာ ပါ၀င္တဲ့ စာရင္း (list) အတိုင္းပဲ Variable ေတြကို အသံုးၿပဳလို ့ရပါတယ္။

method တစ္ခု ကို အလုပ္လုပ္ခိုင္း(Evaluate) ၿပီဆိုရင္ Execution context အသစ္တစ္ခုကို ဖန္တီးတည္ေဆာက္ပါတယ္။ ၿပီးေတာ့ သူရဲ ့ scope ကို အဲဒီ method ကိုေက်ညာထားတဲ့ ေနရာမွာရိွတဲ့ scope chain ထဲမွာ သြားၿပီးေပါင္းပါတယ္။ Execution Context တစ္ခုရဲ ့scope ကိုၾကည့္တဲ့အခါ အတြင္းမွ အၿပင္ကို (locally then globally)တဆင့္ၿခင္းတက္ၿပီးၾကည့္ပါတယ္။ ဒါကဘာကိုေၿပာတာလဲဆိုေတာ့ အတြင္း (local) က အၿပင္(global ) ထက္ပိုၿပီးဦးစားေပးခံရပါတယ္။ ဥပမာ - နာမည္တူေနတဲ့ variable ႏွစ္ခု၊ တစ္ခုု က အတြင္း (local) ၊ အၿခားတစ္ ခုကအၿပင္ (Global) ဆိုၿဖစ္ခဲ့တယ္ဆိုပါေတ့ာ။ ဘယ္ variable ကို ယူမလဲဆိုရင္ local variable ကို ပဲ ယူပါတယ္။

this? ဘာလဲ this ဆိုတာ။

Execution context တိုင္းက scope chain ကို ဖန္တီးတည္ေဆာက္ရံုုမက this ဆိုတဲ့ keyword ေလးတစ္ခုလည္းရိွပါေသးတယ္။ ပံုမွန္အား ၿဖင့္ဆိုရင္ေတာ့၊ ဒီ this ေလးက identity function ေလးပါ။ အိမ္နီးခ်င္း context ေတြကို သူ တို့ ကိုသူတို ့ဘယ္လို ၿပန္ၿပီး ညြန္လို ့ရႏိုင္မလဲ ဆိုတာ က္ုိလည္း ေၿပာၿပပါတယ္။ ဒါေပမယ့္. ကၽြန္ေတာ္တို ့ဟာ ဒီအခ်က္ေပၚမွာ အၿမဲတမ္း မွီတည္ ေနလို ့ မရပါ ဘူး။ အၿခားအိမ္နီးခ်င္း context ေတြထဲကို ဘယ္လို ေရာက္သြားတာလဲအေပၚမူတည္ၿပီး this ရဲ ့အဓိပါယ္က လံုး၀ကြဲၿပားသြားပါတယ္။ အၿခားအိမ္နီးခ်င္း context ေတြထဲ ဘယ္လို ေရာက္သလဲဆိုတာဟာ this ေလးက လက္ရိွ ဘာကို ညြန္းေနလဲလို ့ဆိုလိုတာပါ။

Object-oriented programming မွာ လက္ရိွ ရိွေနတဲ့ လုပ္ကိုင္ေနတဲ့ object ကို ၿပန္လည္ညြန္းၿပီးသံုး ႏိုင္ဖို ့အတြက္ နည္းလမ္းလို ပါတယ္။ this က ဒီလို အပ္ခ်က္ကို ၿဖည့္စည္းေပးပါတယ္။ object ေတြကို သူတို ့ကို သူတို ့ၿပန္ညြန္းဖို ့နဲ ့၊ သူတို ပိုင္ဆိုင္တဲ့ properties ေတြ၊ methods ေတြကို ၿပန္သံုးဖို ့ this က လုပ္ေပးပါတယ္။ ေအာက္ပါ အခ်က္ ၄ ခ်က္က စဥ္းစားဖိုေကာင္းပါတယ္။

၁။ Calling an Object’s Method (Object တစ္ခုရဲ ့ method ကို ေခၚၿခင္း)

<script type = “ text/javascript”>
 var  _phoLay = {
_answer: “I’m Pho Tay.”,
  tell:function() {
   return this._answer;
  }
 };
 var _whoAmI = _phoLay.tell ();
</script>

ဒီကုဒ္ေလးေတြဟာ _whoAmI ဆိုတဲ့ object တစ္ခုကို ဖန္တီးပါတယ္။ ၿပီးေတာ့ သူရဲ ့ property ၿဖစ္တဲ့ _answer ဆိုတဲ ့variable ထဲကို “I’m Pho Tay.” ဆိုတဲ့ စာအစဥ္အတန္း (String) တစ္ခု ထည္ပါတယ္။ေနာက္ tell ဆိုတဲ့ method တစ္ခုကိုေၾကညာပါတယ္။ ဒီ method ကို အလုပ္လုပ္ခိုင္းတဲအခါ JavaScript က execution context တစ္ခု တည္ေဆာက္ပါတယ္။ this ကိုေတာ့ ေနာက္ဆံုးး “.” (dot) ရဲ ့ ေရွမွာ ရိွတဲ့ ဘယ္ object ကိုမဆို ညြန္းခုိင္းပါတယ္။ ဒီမွာ ေတာ့ _whoAmI ေပါ့။ (_whoAmI.tell() ေလ။) tell() ဆိုတဲ့ method ေလးထဲ မွာေတာ့ this က ေနတဆင့္ သူပိုင္တဲ့ property ကိုၾကည္ပါတယ္။ ၿပီးေတာ့ အဲဒီ property ၊ this._answer ထဲက တန္ဖိုးကို return ၿပန္ပါတယ္။ (I’m Pho Tay.)။

၂။ Constructor (Constructor ကို ေခၚၿခင္း)

အေပၚကလို ပါပဲ။ new ဆိုတဲ့ keyword ကို သံုးၿပီး function တစ္ခုကို constructor အၿဖစ္သံုးတဲ့ အခါ၊ this ကို ဖန္တီးခံရတဲ့ object ကို ညြန္းတဲ့ အရာအေနနဲ ့ သံုးႏိုင္ပါတယ္။

<script type = “text/javascript”>
 function aboutMe(answer) { 
  this._answer = answer;
  this.tell = function() {
   return this._answer;
  }
 }
 var _phoLay = new aboutMe(“I’m pho lay.”);
 var _whoAmI = _phoLay.tell();
</script>

ဒီကုဒ္မွာ ေတာ့ phoLay object ကုုိ ကိုယ္တုိင္တိုက္ရိုက္ိ explicitly ဖန္တီးမယ့္အစား ၊ aboutMe ဆိုတဲ့ function တစ္ခုကို ေရးလိုက္ပါတယ္။ ၿပီးမွ phoLay ကို aboutMe ရဲ ့ instance အၿဖစ္ new keyword ကေနတဆင့္ ရယူပါတယ္။ new aboutMe() ဆိုတဲ့ method ေလးကို အလုပ္လုပ္(execute)လုပ္ခိုင္းတဲ့အခါ ၊ ေနာက္ကြယ္မွာ လံုး၀ကြဲၿပာၿခားနားတဲ့ object တစ္ခုကို ဖန္တီးတည္ေဆာက္ပါ တယ္။ aboutMe() ကိုေခၚတဲ့အခါ ၊ this ကို အဲဒီ ဖန္တီးထားတဲ့ object ကို ညြန္းေစပါတယ္။ this က တၿခား variable ေတြလို scope chain ကေန ရယူတာမဟုတ္ပါ။ ဒါေပမယ္ သူက context by context ေပၚမူတည္ၿပီး ညြန္းတာေၿပာင္းလည္းပါတယ္။ context တစ္ခုကေန တစ္ခုကိုေၿပာင္းရင္ reset လုပ္ခံရပါတယ္။

၃။ Function Call (Function ေခၚၿခင္း)

တကယ္လို ့ ပံုမွန္ေရးသလို ပဲေပါ။ ေန ့စဥ္ေရးေလ့ရိွတဲ့ function လိုမ်ိဳး ရွဳပ္ေထြးတဲ့ object ေတြမပါခဲ့ဘူးဆိုရင္ this က ဘာကိုဆိုလိုသလဲ။

<script type = “text/javascript”>
 function  testing_this() {
  return this;
 }
 var whatIsThis = testing_this(); 
</script>

ဒီမွာ this က ဘာကိုညြန္းပါသလဲ။ new keyword ကိုသံုးၿပီး context တစ္ခုလည္းမလုပ္ထားဘူး။ သူဘာကိုညြန္းပါသလဲ။ ဒီေနရာမွာ this ဟာ Global အက်ဆံုးအရာကို ညြန္းပါတယ္။ ဥပမာ - web page ေတြမွာဆိုရင္ global အက်ဆံုးက window object ပါ။ this က window object ကို ညြန္းပါလိမ့္မယ္။

၄။ Event Handler (Event မ်ားကို ကိုင္တြယ္ၿခင္း)

နည္းနည္းပိုၿပီးရွဳပ္ေထြးတဲ့ function calling ေတြမွာ၊ ဥပမာ- onclick event ကို ကိုင္တြယ္ဖို ့ function တစ္ခုသံုးမယ္ဆိုပါစို ့။ event ၿဖစ္ပြားတဲ့ အခါ this ကဘာ ကို ညြန္းမလဲ။ ဒီအတြက္ ရိုးရွင္းတဲ့အေၿဖတစ္ခုကို မေပးႏိုင္ခဲ့ၾကပါဘူး။

ဆက္ရန္။

အာေကလာ(akela)
August 4,2007 1:50 am

မွတ္ခ်က္။ ။ဖတ္မိေသာ article တစ္ခုကို ၾကိဳက္မိ၍ တက္နိုင္သမွ် ၿမန္မာလို ၿပန္လည္ေရးသားထာပါတယ္။
ေပ်ာ္ရြင္ခ်မ္းေၿမ ့ၾကပါေစ။