انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 95
دورة جافا سكريبت

Object Accessors

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,653
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

JavaScript Getter (The get Keyword)

نستطيع الوصول الي البيانات المخزنة بداخل ال properties  وطباعتها عن طريق استخدام الخاصية "get"

ففي المثال التالي قمنا بانشاء دالة "Lang" وتعيينها من النوع "get" وهذه الدالة تقوم بالوصول الي قيمة العنصر "language " ثم بعد ذلك تقوم بطباعة قيمة هذا العنصر علي الشاشة عند استدعائها 

HTML 
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

HTML 
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

HTML 
const person = {
  firstName: "ahmed",
  lastName: "salah",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

 document.getElementById("demo").innerHTML = person.fullName;
جرّب بنفسك

Functions

HTML 
const person = {
  firstName: "ahmed",
  lastName: "salah",
  fullName() {
    return this.firstName + " " + this.lastName;
  }
};

 document.getElementById("demo").innerHTML = person.fullName( );
جرّب بنفسك

Data Quality

تتمكن لغة ال javaScript من تأمين البيانات بشكل افضل عن استخدامك ال setters وال getters في عملة تخزين البيانات وطباعتها بدلا من الدوال العادية 

في المثال التالي يتم طباعة قيمة ال property التالية "language" علي شكل احرف كبيرة

Example

HTML 
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 "

HTML 
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

HTML 
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;
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…