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

(အပိုင္း ၁ ကို အရင္ဖတ္ၾကည့္ေစခ်င္ပါသည္။)

တကယ္လို ့ event handler က Inline ဖန္တီးထားတယ္ဆိုရင္၊ this က အားလံုးနဲ ့ဆိုင္တဲ ့ window object ကို ညြန္းပါတယ္။

<script type="text/javascript">
  function click_handler()
 {
   alert(this); // alerts the window object
  }
</script>
….. 
<button id='thebutton' onclick='click_handler()'>Click me!</button>

တကယ္လို ့ မ်ား event handler ကုိ javaScript ကေနတဆင့္ ဖန္တီးထားတယ္ဆိုရင္၊ this က event ကို ရိုက္ထုတ္လိုက္တဲ ့ DOM (Document Object Model) ကို ညြန္းပါလိမ့္မယ္။

<script type="text/javascript">
 function click_handler()
 {
  alert(this); // alerts the button DOM node
 }
 function addhandler() {
  document.getElementById('thebutton').onclick = click_handler;
 }
 window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>

scope က ဘယ္လို ့ ရွဳပ္ေထြးတာလဲ..

ကဲ၊ ကၽြန္ေတာ္တို ့ ေနာက္ဆံုး ဥပမာေလးကို ပဲ ထပ္ၿပီးၿပင္ၾကမယ္။ button ကို ႏိွပ္လိုက္တဲ့အခါတုိင္း click_handler ကို အလုပ္လုပ္ခိုင္း မဲ့ အစား aboutMe ဆိုတဲ့ method ကို ေမးခြန္းေမးပါမယ္။ ကုဒ္ေတြက ရိုးရွင္းပါတယ္။ ေအာက္မွာၾကည့္ပါ။

<script type = “text/javascript”>
function aboutMe(answer) 
{
this._answer = answer;
this.tell = function() {
alert(this._answer);
}
}
function addhandler() 
{
var _president = new aboutMe(“I am the president.”),
var the_button = document.getElementById('thebutton'); 
the_button.onclick = _ president.tell();
 }
window.onload = addhandler;
</script>

ဟုတ္တယ္ဟုတ္ :D။ ရွင္းရွင္းေလးပဲမလား။ ဘာမ်ားရွဳပ္လို ့လဲဗ်ာ။ button ကို ႏိွပ္လိုက္တဲ့အခါ _president.tell() ကို အလုပ္လုပ္ေစပါတယ္။ ဒီေတာ့ I am the president ဆိုတဲ့ စာအစဥ္အတန္း(string) ကို ရိုက္ထုတ္ၿပမယ္ေလ။ ဟုတ္.. ဘာမွမရွဳပ္ဘူး။ ဒါေပမယ့္ web browser က တကယ္တမ္းဘာရိုက္ထုတ္ၿပလဲ။ စမ္းၾကည့္ေစခ်င္ပါသည္။

စမ္းၿပီးၿပီ..ဟုတ္။ :) ၾကည့္... ဘာမ်ားအမွားလုပ္ခဲ့ပါလိမ့္။ :|

ၿပသာနာကေတာ့..။ ကၽြန္ေတာ္တို ့ tell() ကို button ရဲ ့ onclick event ကို ကိုင္တြယ္ဖို ့ reference အၿဖစ္ပို ့ ေပးခဲ ့ ပါတယ္။ (the_button.onclick = _president.tell();)။ အဲဒီအခါ tell() ဟာ ( event handler အၿဖစ္ အလုပ္လုပ္ေနတဲ့ အတြက္) မတူကြဲၿပားတဲ့ execution context တစ္ခုထဲမွာ အလုပ္လုပ္(Run) ပါတယ္။ လြယ္လြယ္ ေၿပာရရင္ေတာ့ tell() ထဲမွာရိွတဲ့ this keyword က event ကို ရိုက္ထုတ္လိုက္တဲ့ DOM (Document Object Model) (ဒီေနရာမွာေတာ့ button ေပါ့) ကို ညြန္းပါတယ္။ သူဟာ aboutMe ရဲ ့ object မဟုတ္ေတာ့ပါဘူး။ DOM Element ၿဖစ္တဲ့ button မွာ _answer ဆိုတဲ့ property မရိွပါဘူး။ ဒါေၾကာင့္ browser က “I am the president” အစား underfined ကို ရိုတ္ထုတ္ၿပပါတယ္။

ဒီလို ၿဖစ္ရပ္မ်ိဳးက ကၽြန္ေတာ္တို ့ program ေတြမွာ မေမ်ာ္လင့္ ပဲၿဖစ္တက္ပါတယ္။ ေနာက္ၿပီး အမွားကို ရွာဖို ့ တခါတေလ မွာ အေတာ္ခက္ခဲ ပါတယ္။ ဥပမာ - ကၽြန္ေတာ္တုိ ဖန္တီးထားတဲ့ object (ဒီေနရာမွာ aboutMe ေပါ့) ရဲ ့ property နာမည္ (name) က event ကို ရိုတ္ထုတ္လိုက္တဲ့ DOM ရဲ ့ property နာမည္ (name) နဲ ့ သြားတူေနခဲ့မယ္ဆိုရင္ လြယ္လြယ္ အေၿဖရွာဖို ့ မၿဖစ္ႏိုင္ေတာ့ပါဘူး။

ဆက္ရန္။

အာေကလာ(akela)
August 17,2007 3:40 pm

မွတ္ခ်က္။ ။ပိုစ္တစ္ခုနဲ ့တစ္ခုၾကား အခ်ိန္ကြာဟလြန္းေနပါတယ္။ ေနာက္ဆို မကြာေအာင္ေရးသြားပါမယ္။