اذهب إلى المحتوى

السؤال

نشر

عندما أقرأ عن البرمجة الكائنية في لغة JavaScript أجد في كثير من الأحيان مصطلحي getter و setter ، ولكن لم أفهم ما هما بالضبط، وفيما يتم إستعمالهما.

أعلم أنهما عبارة عن توابع Methods في الأصناف Classes ولكن لا أعرف كيف يتم كتابتهما أو الفائدة منهما؟

Recommended Posts

  • 1
نشر

ليس فقط في الأصناف Classes، بما أن الأصناف مبنية فوق الكائنات Objects فالخواص يمكن استخدامها ضمن الكائنات أيضًا، get و set يمكنهما الربط بين خاصية ضمن الكائن (أو الصنف) مع تابع يتم تنفيذه عن كل وصول إلى الخاصية أو كل تعيين لقيمة جديدة للخاصية،

لنأخذ المثال التالي كائن يعبر عن شخص:

const person = {
  firstName: 'Emad',
  lastName: 'Saif',
  fullName: 'Emad Saif'
}

خاصية الاسم الكامل fullName بدلًا من كتابتها بشكل ثابت ضمن الكائن ما قد يعرضنا لأخطاء في ذلك أو نسيان لتعيينها، يمكننا حساب تلك الخاصية من الخاصيتين firstName و lastName في كل مرة نحاول الحصول على قيمة الخاصية، هنا نستفيد من get عبر ربط الخاصية بتابع يعيد قيمة الخاصية، ينفذه جافاسكريبت تلقائيًا في كل مرة نحاول الوصول للخاصية،

يصبح الكائن كالتالي:

const person = {
  firstName: 'Emad',
  lastName: 'Saif',
  get fullName(){
    // نحسب ونعيد قيمة الخاصية
    return this.firstName + ' ' + this.lastName;
  }
}

console.log(person.fullName) // 'Emad Saif'

بنفس المبدأ يمكن استخدام الخاصية set لتعيين قيمة خاصية ما ديناميكيًا عبر استدعاء تابع وتغيير قيم الخواص من داخل التابع،

في مثالنا يمكننا تعيين قيمة fullName مباشرة وداخلها نقوم بتغيير الاسم الأول والكنية كالتالي:

const person = {
  firstName: 'Emad',
  lastName: 'Saif',
  get fullName(){
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(value){
	const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName
  },
}

person.fullName = 'Bilal Hasan';

console.log(person.firstName) // 'Bilal'
console.log(person.lastName)  // 'Hasan'

بنفس المبدأ يمكننا تغيير صيغة التعريف من كائن إلى صنف ليصبح المثال كالتالي:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName
  }
  
  get fullName(){
    return this.firstName + ' ' + this.lastName;
  }
  
  set fullName(value){
	const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName
  }
}

const person = new Person('Emad', 'Saif')

// get
console.log(person.fullName) // 'Emad Saif'

// set
person.fullName = 'Bilal Hasan';
console.log(person.firstName) // Bilal
console.log(person.lastName) // Hasan

يمكنك الاستفادة من قراءة المقال التالي:

 

  • 1
نشر (معدل)

احيانا لا تريد ان تقوم بتعريف العناصر المحتواة داخل ال object بشكل مباشر وإنما تحتاج لعمل بعض التعديلات قبل اضافة العنصر. 

لفعل ذلك بدون الـ get وال set ستحتاج لكتابة كود يشبه التالي

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person.name); // Jane Doe

person.setName('Jane Smith');
console.log(person.getName()); // Jane Smith

 

بينما عند استخدامهما يصبح الكود بالشكل التالي :

class Person {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person.name); // Jane Doe

person.name = 'Jane Smith'
console.log(person.name); // Jane Smith

وفي حال لم تقم بتعريف setter يصبح من غير الممكن تعديل الاسم

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
}

let person = new Person("Jane Doe");
console.log(person.name);

// attempt to change the name, but cannot
person.name = 'Jane Smith';
console.log(person.name); // Jane Doe

 

تم التعديل في بواسطة عمر قره محمد

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...