ففي المثال التالي قمنا بانشاء دالة "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

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

Object Accessors

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Object Accessors JavaScript