Object Accessors
في هذا الدرس سوف نتعرف علي ال setters وال getters والذي يعتبران من اهم الدوال الخاصة بأي object
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Object Accessors chevron_left JavaScript
Object Accessors
</> JavaScript Getter (The get Keyword)
نستطيع الوصول الي البيانات المخزنة بداخل ال properties وطباعتها عن طريق استخدام الخاصية "get"
ففي المثال التالي قمنا بانشاء دالة "Lang" وتعيينها من النوع "get" وهذه الدالة تقوم بالوصول الي قيمة العنصر "language " ثم بعد ذلك تقوم بطباعة قيمة هذا العنصر علي الشاشة عند استدعائها
const person = {
firstName: "ahmed",
lastName: "saleh",
language: "en",
get lang() {
return this.language;
}
};
/* Display data from the object using a getter: */
document.getElementById("demo").innerHTML = person.lang;
</> JavaScript Setter (The set Keyword)
نستطيع اضافة القيم الي properties معينة عن طريق استخدام الخاصية "set"
ففي المثال التالي قمنا بأنشاء دالة من النوع set وقمنا بتسميتها ب Lang وهذه الدالة تستقبل parameter(Lang) وتقوم هذه الدالة بأخذ هذه القيمة ثم بعد ذلك تقوم بأستبدالها بقيمة العنصر "language "
Example
const person = {
firstName: "ahmed",
lastName: "ali",
language: "",
set lang(lang) {
this.language = lang;
}
};
person.lang = "ar";
document.getElementById("demo").innerHTML = person.language;
</> JavaScript Function or Getter?
الفرق الاساسي بين ال getters وال function هو تسهيل عملية الكتابة في حالة ال getter لانه عند استخدامك لل function لطباعة البيانات ربما تنسي كتابة احد الاقواس وهذا يسبب خطأ ويفشل عملية تنفيذ البرنامج
- المثالين التالين هما عبارة عن نفس المثال ولكن الاول نستخدم خلاله ال getters لطباعة البيانات والثاني نستخدم خلاله ال functions
Getter
const person = {
firstName: "ahmed",
lastName: "salah",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName;
Functions
const person = {
firstName: "ahmed",
lastName: "salah",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName( );
</> Data Quality
تتمكن لغة ال javaScript من تأمين البيانات بشكل افضل عن استخدامك ال setters وال getters في عملة تخزين البيانات وطباعتها بدلا من الدوال العادية
في المثال التالي يتم طباعة قيمة ال property التالية "language" علي شكل احرف كبيرة
Example
const person = {
firstName: "Mahmoud",
lastName: "alaa",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
/* Display data from the object using a getter: */
document.getElementById("demo").innerHTML = person.lang;
المثال التالي يتم اخذ القيمة الموجودة بداخل ال property التالية "Lang" ثم تحويل احرف الي احرف كبيرة ثم بعد ذلك نقوم بتخزين هذه القيمة بداخل property اخري تسمي "language "
const person = {
firstName: "Mahmoud",
lastName: "alaa",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
person.lang = "en";
document.getElementById("demo").innerHTML = person.language;
</> Object.defineProperty()
يمكننا استخدام الدالة ( )Object.definerProperty في اضافة كل من ال setters وال getters كما في المثال التالي
Example
const obj = {counter : 0};
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;}
});
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
