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

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

Saturday, August 4, 2007

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 တစ္ခုကို ၾကိဳက္မိ၍ တက္နိုင္သမွ် ၿမန္မာလို ၿပန္လည္ေရးသားထာပါတယ္။
ေပ်ာ္ရြင္ခ်မ္းေၿမ ့ၾကပါေစ။



Wednesday, August 1, 2007

ေရးသူ - သန္ ့ေဇာ္မင္း
ေန ့စြဲ - july 31,2007
----------------------------------

C++ Programming Language (အပိုင္း - ၂)

Variable Declaration

ဒီတေခါက္ ကၽြန္ေတာ္တို႔ variable declaration အေၾကာင္းစလိုက္ရေအာင္။ variable declaration ဆိုတာက ကၽြန္ေတာ္တို႔ေရးတဲ႔ programမွာ အသံုးျပဳမယ္႔ variable ေတြကို ၾကိဳတင္ေၾကျငာတာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႔ program အလုပ္လုပ္ေနခ်ိန္မွာ user (ကၽြန္ေတာ္တို႔ programကို အသံုးျပဳသူ) ေတြဆီကေန တန္ဖိုးတခုခုကို လက္ခံေတာ့မယ္ဆိုရင္၊ လက္ခံရရွိမယ့္ dataေတြကို သိမ္းထားမယ္႔ေနရာတခုကို ၾကိဳျပီး ေၾကျငာေပးထားရပါတယ္။ ဒါကို variable declaration လုပ္တယ္လို႔ ေခၚပါတယ္။ variable တခုကို ေၾကျငာလုိက္ျပီဆိုရင္ programကို အသံုးျပဳေနတဲ႔ computerရဲ့ memoryေပၚမွာ အဲဒီ variableအတြက္ ေနရာတခုကို createလုပ္ေပးပါတယ္။ အဲဒီေနရာမွာ ကၽြန္ေတာ္တို႔က dataေတြကို အခ်ိန္အတိုင္းအတာ တခုအထိ သိမ္းထားလို႔ရပါတယ္။ variable တခုကို ေၾကျငာေတာ့မယ္ဆိုရင္ အပိုင္း၂-ပိုင္း သိဖို႔လိုအပ္ပါတယ္။ variable ရဲ့ နံမယ္နဲ႔ သိမ္းခ်င္တဲ႔ dataရဲ့ အမ်ိဳးအစားတို႔ ျဖစ္ပါတယ္။ ဥပမာအားျဖင့္ variableမွာ numberကို သိမ္းခ်င္တယ္၊ စာသားကို သိမ္းခ်င္တယ္၊ စသည္ျဖင့္ ေျပာေပးရပါတယ္။ C & C++ မွာ သံုးလို႔ရတဲ့ data type ေတြက ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။
Variable တခုကို ေၾကျငာတဲ႔ ပံုစံကေတာ့ ဒီလိုျဖစ္ပါတယ္။

ဆက္ဖတ္ရန္...
C++ Programming အပိုင္း ၂

မွတ္ခ်က္။ ။ ကိုသန္ ့ေဇာ္မင္း ရဲ ့ဘေလာမွာ july 31, 2007 6:05pm က သူကိုယ္တိုင္ေရးထားတာကို ခြင့္ေတာင္းၿပီး ၿပန္လည္ ေဖၚၿပထား ၿခင္းၿဖစ္ပါတယ္။ ကိုသန္ ့ေဇာ္မင္းကို ေက်းဇူးတင္ပါတယ္။
loiyoes