JavaScript

Object Accessors

في هذا الدرس سوف نتعرف علي ال setters وال getters والذي يعتبران من اهم الدوال الخاصة بأي object 

التاريخ

09 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

816

المواضيع

24
الشروحات 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;
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.