JavaScript Object ဆက်စပ်ပစ္စည်းများ
JavaScript Accessors (Getters and Setters)
ECMAScript 5 (ES5 2009) သည် Getter နှင့် Setters များကို မိတ်ဆက်ပေးခဲ့သည်။
Getters နှင့် setters များသည် Object Accessors (Computed Properties) ကို သတ်မှတ်နိုင်စေပါသည်။
JavaScript Getter (The get Keyword)
ဤဥပမာသည် langပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု get
၏တန်ဖိုးကို အသုံးပြုသည် language။
ဥပမာ
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
JavaScript Setter (သတ်မှတ်သော့ချက်စာလုံး)
ဤဥပမာသည် langပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု set
၏တန်ဖိုးကို အသုံးပြုသည် language။
ဥပမာ
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
JavaScript Function သို့မဟုတ် Getter?
ဤဥပမာနှစ်ခုကြား ခြားနားချက်ကား အဘယ်နည်း။
ဥပမာ ၁
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
ဥပမာ ၂
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
ဥပမာ 1 သည် fullName ကို လုပ်ဆောင်ချက်အဖြစ် ဝင်ရောက်သုံးသည်- person.fullName()။
ဥပမာ 2 သည် fullName ကို ပိုင်ဆိုင်ခွင့်- person.fullName ဖြစ်သည်။
ဒုတိယဥပမာသည် ပိုမိုရိုးရှင်းသော syntax ကိုပေးသည်။
ဒေတာအရည်အသွေး
getters နှင့် setters များကိုအသုံးပြုသောအခါ JavaScript သည် ပိုမိုကောင်းမွန်သောဒေတာအရည်အသွေးကို လုံခြုံစေပါသည်။
langဤဥပမာတွင် ပိုင်ဆိုင်မှု ကိုအသုံးပြုခြင်းဖြင့် ပိုင်ဆိုင်မှုတန်ဖိုးကို languageစာလုံးကြီးဖြင့် ပြန်ပေးသည်-
ဥပမာ
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
ပိုင်ဆိုင်မှု ကိုအသုံးပြုခြင်းဖြင့် langဤဥပမာတွင်၊ ပိုင်ဆိုင်မှု၌ စာလုံးကြီးတန်ဖိုးကို သိမ်းဆည်းသည် language-
ဥပမာ
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
အဘယ်ကြောင့် Getters နှင့် Setters ကိုအသုံးပြုသနည်း။
- ၎င်းသည် ပိုမိုရိုးရှင်းသော syntax ကိုပေးသည်။
- ၎င်းသည် ဂုဏ်သတ္တိများနှင့် နည်းလမ်းများအတွက် တူညီသော syntax ကို ခွင့်ပြုသည်။
- ၎င်းသည် ပိုမိုကောင်းမွန်သော ဒေတာအရည်အသွေးကို လုံခြုံစေနိုင်သည်။
- လူမသိသူမသိလုပ်နေကျအရာတွေအတွက် အသုံးဝင်ပါတယ်။
Object.defineProperty()
Object.defineProperty()Getters နှင့် Setters များကို ထည့်ရန် နည်းလမ်းကိုလည်း သုံးနိုင်သည် ။
တန်ပြန်ဥပမာတစ်ခု
// Define object
const obj = {counter : 0};
// Define setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;