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