virtual Intelligence

Tuesday, August 21, 2007

Scope in JavaScript (part 4)
(JavaScript ????????? ????????? ????????) - ??????? ?

(??????? ? ? ? ????? ? ??? ????????????????????????)

.bind() ???????? ? ???

????????????? apply() ? call() ??? ? ?? ? ???????????????????????????? ?????????? .bind() ?????????? ????????? ????? ?????????? function ?? ? ??????(reference) ???? ???? (return) ????????????????????????????? ?????????????? ???????????? ??? ???????????????? ??????? ????????????? ?????????????????

<script type="text/javascript">
var _president  = {
 _answer: "I am the president"
};
var _secaretary = {
 _answer: "I am the secaretary of president"
};

function aboutMe(greetingWord) {
 return greetingWord + " " +this._answer;
}

Function.prototype.bind = function(obj) {
 var method = this,
  temp = function() {
   return method.apply(obj, arguments);
  };

 return temp;
}
var whatTheysays;

whatTheysays = aboutMe.bind (_president, ["Hello My Country,"]); // "Hello My Country, I am the president"
alert(whatTheysays);

whatTheysays = aboutMe.bind (_secretary, ["Hello My Officer,"]); // "Hello My Officer, I am the secretary of president"
alert(whatTheysays);
</script>

???????????? ? bind() ??? Function object ?? ? prototype propety ??? ???????? ?????????????? ???? ???????????? ? ?????????? ? ?????? (method) ??????? ??? ?????????????????????? aboutMe.bind(_president) ????????? ?????? Javascript ? bind() ??????????? execution context ???????? ???????????? ???????? this ??? ???? aboutMe ??? ??????????????? ????? ??? prarmeter ??????? obj ??? _president ?????????????????? ??????????????? :D?

???? ????? ? ???????? method ??? ?????? ??????????? method ????? this ??? ???????? ???????? ???? this ? aboutMe() ??? ????? ???????? ?????????? function ??? ?????????????????? ???????????????????? method ??? scope chain ??????? ???? ???????????? ????????? this ??? ??????? ? ???????? ??????? function ???? ??? ????????? ????????? this ? ???? ????? ???????? (local context) ?????????????? aboutMe() ??????????????? ??????? function ?? ????????? ???????? ??????????????

??????????????????? ?? ????????? temp ? closure (????????????????????? ????????????????) ????? bind() ??? ??????? ? ???? (return ) ?????????? aboutMe ??? _president object ???????? ?????????????????? ?????? ????????? ????? execution context ??? ??????????? ? ??????? ???????????? ???????????????????

??? ???????????? ? event handler ????? ????????????? ??????????????????? :D ? ????? ???????? ????? event handler ??? ????? ????????????????


<script type="text/javascript">

var the_button;
function aboutMe(answer) 
{
this._answer = answer;
this.tell = function() {
alert(this._answer);
}
}
 Function.prototype.bind = function(obj) {
 //alert(this + 'this in bind');
 //alert(arguments[0].the_answer);
    var method = this,
     temp = function() { 
      return method.apply(obj, arguments);
    }; 

   return temp;
 }            

 function addhandler()
 { 
var _president = new aboutMe(“I am the president.”),
var the_button = document.getElementById('thebutton'); 
the_button.onclick = _ president.tell();
 //alert(this + ' this in addhandler');
  the_button.onclick = _president.tell.bind(_president);
}
</script>

……
……

<BODY   onload="javascript:addhandler();" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<button ID="theButton">Click Me</button>
</BODY>
</HTML>

??? html ??? body ?? ? onload ??? addhandler() ??? ???? ?????????????????????????

????? ?????????????????????????.?

?????????????????? ????????

??????(akela)
Augest21, 2007 12:11 pm

Saturday, August 18, 2007

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

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

Context မ်ားကို .apply() နဲ ့ .call() မတ္သတ္(method) မ်ားသံုးၿပီး ကိုင္တြယ္ၿခင္း

တကယ္ေတာ့ ကၽြန္ေတာ္တို ့လို ခ်င္ခဲ့တာဟာ object ရဲ ့ မတ္သတ္(method) ကို events(အဗင့္) လိုမ်ိဳး၊ setTimeout() လို မ်ိဳး ကိုကိုင္တြယ္ဖို ့ သံုးတဲ့အခါက်ရင္ အဲဒီ method(မတ္သတ္)ကို သူရဲ ့ native context(မူလ ကြန္းတက္) ထဲမွာပဲ အလုပ္လုပ္(run) ေစခ်င္တာပါ။ လူသိနည္းတယ္လို ့ ဆိုႏိုင္တဲ့ မတ္သတ္ ၂ ခုရိွပါတယ္။ apply() နဲ ့ call() ပါ။ ဒီ မတ္သတ္ႏွစ္ခုကို သံုးၿခင္းအားၿဖင့္ ကၽြန္ေတာ္ တို ့ ဟာ this ရဲ ့ default value အေပၚကို လႊမ္းၿပီး(override) ေရးႏိုင္ပါတယ္။


<script type="text/javascript">
var _president  = {
_answer: "I am the president"
};
var _secretary = {
_answer: "I am the secretary of president"
};
 function aboutMe(greetingWord)
{
return greetingWord + " " +this._answer;
}
var whatTheysays;
whatTheysays = aboutMe.call(_president, "Hello My Country,"); 
alert(whatTheysays);
whatTheysays = aboutMe.call(_secretary, "Hello My Officer,"); 
alert(whatTheysays);
</script>

ဘယ္လိုလဲ :D ။ အလုပ္လုပ္တယ္ဟုတ္။ :P။

ဒီဥပမာေလးမွာဆိုရင္ ကၽြန္ေတာ္တို ့ president object ရယ္ secretary object ရယ္ဆိုၿပီး object ႏွစ္ခု ဖန္တီးလိုက္ပါတယ္။ သူတို တစ္ခုစီမွာ _answer ဆိုတဲ့ property ကို နာမည္ (name) အတူတူေပးလိုက္ပါတယ္။ ၿပီးေတာ့ aboutMe() ဆိုတဲ့ function တစ္ခုကိုဖန္တီး လုိက္ပါတယ္။အဲဒီ function က parameter တစ္ခုကိုလက္ခံပါတယ္။ greetingWord ပါ။ အဲဒီ function ထဲမွာ greetingWord ရယ္၊ သူဘယ္သူလဲဆိုတာကိုေၿပာတဲ့ စာအစဥ္အတန္း(string) (this._answre) ရယ္ကိုေပါင္းၿပီးၿပပါတယ္။ သတိထားမိလား.. this က call() ကပိုလိုက္တဲ့ object ေပၚမူတည္ၿပီးေၿပာင္းလဲသြားပါတယ္။ president ဆိုရင္ this.answer ဟာ _president ရဲ ့ _answer ၿဖစ္သြားၿပီး၊ _secretary ဆိုရင္ _secretary ရဲ ့ _answer ၿဖစ္သြားပါတယ္။ ဟုတ္။ ဒါဘာေၾကာင့္လဲ ဆိုေတာ့ call() မတ္သတ္(method) ေၾကာင့္ၿဖစ္ပါတယ္။ ပံုမွန္သာ aboutMe() ကို ေခၚတယ္ဆိုရင္ အားလံုးဟာ undified ပါပဲ။ ဘာလို ့ ဆိုေတာ့ global object ၿဖစ္တဲ့ window မွာ _answer ဆိုတဲ့ property မရိွပါဘူး။ ( ကၽြန္ေတာ္တို ့ က window object မွာ ကိုယ္ဖသာ ဒီ _answer ကို မဖန္တီးထားဘူးခဲ့ရင္ မရိွဘူးလုိ ့ ေၿပာတာပါ။) ဒီ call() မတ္သတ္ေလးက ကၽြန္ေတာ္တို ့လိုခ်င္ေနတာနဲ ့ အားလံုးကြက္တိပဲမဟုတ္လား။ :D ။

apply() က call() နဲ ့တူူတူပါပဲ။ အားလံုး တပံုစံပဲ အလုပ္လုပ္ပါတယ္။ တစ္ခုပဲကြဲတယ္။ဘာလဲဆိုေတာ့ apply() က arguments (parameters) ေတြကို array အေနနဲ ့လက္ခံပါတယ္။ ဒီ apply() မတ္သတ္က function တစ္ခုဟာ parameters ေတြကို ဘယ္ႏွစ္ခုလက္ ခံမယ္ဆိုတာကို ေသခ်ာမသိတဲ့ အခါမ်ိဳးမွာ အလြန္အသံုး၀င္ပါတယ္။

<script type="text/javascript">
.........
.........
whatTheysays = aboutMe.apply (_president, ["Hello My Country,"]); 
alert(whatTheysays);

whatTheysays = aboutMe.apply (_secretary, ["Hello My Officer,"]); 
alert(whatTheysays);
</script>

apply() နဲ ့ call() တိုဟာ သူဟာနဲ ့သူ အလြန္ အသံုး၀င္ပါတယ္။ ဒါေပမယ္ ဒီ ႏွစ္ခုဟာ တကယ္ေတာ့ ကၽြန္ေတာ္တို ့လိုခ်င္တာရဲ ့ လမ္းတ ၀တ္မွာပဲရိွေနပါေသးတယ္။ event handler အေနနဲ ့သံုးမယ္ဆိုရင္ေလ။ ဒီကုဒ္ေလးေတြကို ၾကည့္လိုက္ပါဦး။

function addhandler() 
{
var _president = new aboutMe(“I am the president.”),
var the_button = document.getElementById('thebutton'); 
the_button.onclick = _ president.tell.call(_president);
 }

စမ္းၾကည့္ၿပီးၿပီ ဟုတ္။ ၿပသာနာက call() ေရာ apply() က ခ်က္ၿခင္း အလုပ္လုပ္(execute) လုပ္တာပါပဲ။ event handler အေနလုပ္တဲ့ အခါ event ကို ရိုတ္ထုတ္ (fire) လိုက္တဲ့ အခ်ိန္မွ မတ္သတ္(method) ကို အလုပ္လုပ္(Run) တာမဟုတ္ပဲ ခ်က္ၿခင္းအလုပ္လုပ္ တာက ၿပသာနာပါ။ ဒီအတြက္ ေနာက္ထပ္လူ သိနည္းတဲ့ function တစ္ခုရိွေနပါတယ္။ အလြန္အသံုး၀င္တဲ့ function ပါ။

ဆက္ရန္။

အာေကလာ(akela)
Augest 18, 2007 11:21 pm

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

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