Getters and setters in javascript object

ايه اللى يخلينى استخدم get & set فى ال js object بدل ما استخدم ال methods العادية
هل ليها اهمية ومميزات افضل من ال method واذا كان ليها مميزات ايه هى المميزات دى ؟

2 Likes

مرحبا @Howaida

نستطيع أن نقول بأن الـ getters و الـ setters أو ما تسمى بالـ accessors هي معايير للوصول للـ properties سوا لقرأتها أو للكتابة عليها مع الإمكانية لعمل تخصيصات لطريقة ارجاع تلك الـ properties او طريقة التعديل عليها دون الحاجة لإنشاء methods للقيام بهذه الوظيفة.

خلينا نتكلم عن الـ object قليلاً قبل أن نتكلم عن الـ accessors.

في الـ object نقوم بتعريف شيئين:

1- الـ properties والتي تجيب عن السؤال التالي:
ما الذي يمتلكة؟

1- الـ methods والتي تجيب عن السؤال التالي:
ما الذي يمكنة القيام به؟


لنأخذ مثال عن الـ Object للـ person

بإمكاننا تعريف الـ properties التالية له:

firstName
lastName
age

هذه الـ properties تجيب عن السؤال ما الذي يمتلكة الشخص؟

  • يمتلك إسم أول
  • يمتلك لقب
  • يمتلك عمر

وبإمكاننا تعريف الـ Methods التالية له:

walk()
talk()

هذه الـ methods تجيب عن السؤال ما الذي يمكن هذا الشخص القيام به؟

  • يستطيع التكلم
  • يستطيع المشي

جميل كل شئ حتى الأن مرتب ومنطقي. :smile:

الأن لنفترض أنك تريدي أن تحصلي على إسم الشخص كاملاً (fullName). (الأسم الأول + اللقب) :thinking:

لنطرح هذا السؤال:

هل لـ fullName شئ يمتلكة الشخص كالـ properties أم شئ يقوم به الشخص كالـ methods؟

بالتأكيد أنه شئ يمتلكة ويتكون من إسمة الأول (firstName) و الـ (lastName) والذان هما في الأصل properties.

اذا هل من الأفضل أن أقوم بالحصول على الـ fullName كـ property أم كـ method؟

أظن بأنك أصبحتي تعرفي ماهو الأنسب إختيارة، لكن قبل أن تحددي إجابتك لنلقي نظرة على الطريقتين التي نستطيع عملها لتحقيق المطلوب:

1- بإستخدام method سأقوم بكتابة التالي:

let person = {
  firstName: "Mohammed",
  lastName : "Alhakem",
  age      :  25,
  fullName() {
    return `${this.firstName} ${this.lastName }`;
  }
};

من ثم عندما أريد عرض الأسم سأقوم بطلب التالي:

person.fullName()

2- بإستخدام getter سأقوم بكتابة التالي:

let person = {
  firstName: "Mohammed",
  lastName : "Alhakem",
  age      :  25,
  get fullName() {
    return `${this.firstName} ${this.lastName }`;
  }
};

من ثم عندما أريد عرض الأسم سأقوم بطلب التالي:

person.fullName

ماهو الفرق؟

الفرق هو أننا في الطريقة الأولى تعاملنا مع الـ fullName كـ method وفي الطريقة الثانية سمح لنا الـ getter للتعامل معه كـ property.


من هنا أيضاً تستطيعي معرفة لماذا عندما تريدي الحصول على طول مصفوفة تقومي بكتابة الكود التالي:

arrayName.length;

ولا تقومي بإستخدام

arrayName.length();

لان الـ array هي عبارة عن object ويتم في الكواليس تعريف الـ lenght بالـ الـ setters و الـ getters لأنه شئ تملكة المصفوفة وليس شئ تقوم به، في الجانب الأخر لدى المصفوفات methods مثل:

arrayName.push();

إذاً نستطيع القول بأن غالباً ما تستطيع الـ methods القيام بدور الـ getter لكن لست الأنسب دائماً، والمثال أعلاة تستطيعي من خلالة تحديد أيهما الأنسب في كل مرة.


إتفقنا؟ لننتقل للجزء الأخر

الـ setter

غالباً ما يرتبط حضور الـ getter بحضور الـ setter وذلك لانها معاً تساعدنا على إنشاء ما يسمى بالـ pseudo-property

الـ pseudo-property هي مثل الـ fullName property والتي تكون في الأصل غير موجودة في الـ Object ولكن يتم إنشائها بالـ getters و الـ setters.

وكما تعرفي من خلال الـ setter يتم تحديد عمل set لقيم الـ properties ويمكن الإستفادة منها لعمل logic محدد أو validation للقيم التي يتم إسنادها للـ property.

وتتميز طريقة إسناد قيم للـ property من خلال الـ setter انها تتم من خلال علامة = بخلاف الـ method التي يتم فيها تمرير القيمة كـ parameter.

/*Using setter*/
person.fullName = "Mohammed Alhakem";

/*Using method*/
person.fullName("Mohammed Alhakem");

أيضاً ربما قد نحتاج عمل private property وفي هذه الحالة لا نستطيع الوصول لها إلا من خلال الـ accessors


في الأخير تذكري أن هذه feature تم إضافتها في ECMAScript 5 وفي نفس الوقت لا يعني ذلك أنه نستخدم هذه الـ accessors بشكل زائد عن اللزوم و في كل مرة مما قد يسبب إرتباك لمن قد يتعامل مع الـ objects التي قمتي بعملها.

لذا انصح بالتعمق في مفاهيم الـ OOP حتى تعرفي اكثر عن ذلك.

6 Likes

جميلة جدا طريقة شرحك يا باشمهندس محمد
هو ايه المصدر اللى حضرتك درست منه ال javascript

3 Likes

@Howaida :blush: شكراً لك

في الحقيقة لا أستحضر مصدر واحد محدد، لكني بإمكاني أن أوكد لك أن أكبر مصدر درست منه هو الممارسة و إرتاكبي للأخطاء التي تعلمت منها الكثير :grin:.

3 Likes