متدهای Setter و Getter در جاوااسکریپت

سودا مجتهدی
شهریور 21, 1401

متدهای getter و setter برای دریافت یا تنظیم مقادیر ویژگی‌ها در جاوااسکریپت مورد استفاده قرار می‌گیرند. در این مقاله قصد داریم تا بیشتر با متدهای getter و setter  آشنا شویم و نحوه استفاده از آن‌ها را در مثال باهم بررسی کنیم.

دو نوع ویژگی آبجکت در جاوااسکریپت وجود دارد:

  • Data properties
  • Accessor properties

Data Property

در ادامه یک نمونه از data properties را باهم بررسی می‌کنیم:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const student = {
// data property
firstName: 'Monica';
};
const student = { // data property firstName: 'Monica'; };
const student = {

    // data property
    firstName: 'Monica';
};

Accessor Property

در جاوااسکریپت accessor properties متدهایی هستند که مقدار یک آبجکت را دریافت کرده و یا آن‌ را تنظیم می‌کنند. برای این کار از این دو کلمه کلیدی استفاده می‌کنیم:

  • get
    get– برای تعریف یک متد getter برای دریافت مقدار ویژگی
  • set
    set– برای تعریف یک متد setter برای تنظیم مقدار ویژگی

متد getter در جاوااسکریپت

در جاوااسکریپت برای دسترسی به ویژگی‌های یک آبجکت از متدهای getter استفاده می‌شود. به عنوان مثال:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const student = {
// data property
firstName: 'Monica',
// accessor property(getter)
get getName() {
return this.firstName;
}
};
// accessing data property
console.log(student.firstName); // Monica
// accessing getter methods
console.log(student.getName); // Monica
// trying to access as a method
console.log(student.getName()); // error
const student = { // data property firstName: 'Monica', // accessor property(getter) get getName() { return this.firstName; } }; // accessing data property console.log(student.firstName); // Monica // accessing getter methods console.log(student.getName); // Monica // trying to access as a method console.log(student.getName()); // error
const student = {

    // data property
    firstName: 'Monica',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

// trying to access as a method
console.log(student.getName()); // error

در برنامه‌ای که داریم متد

getName()
getName()برای دسترسی به ویژگی یک آبجکت ایجاد شده است.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
get getName() {
return this.firstName;
}
get getName() { return this.firstName; }
get getName() {
    return this.firstName;
}

نکته‌ای که باید به آن توجه کنیم این است که برای ایجاد متد getter حتما باید از کلمه کلیدی

get
getاستفاده کنیم. همچنین هنگام دسترسی به مقدار، آن مقدار موردنظر به عنوان یک ویژگی در دسترس ما قرار می‌گیرد.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
student.getName;
student.getName;
student.getName;

اما هنگامی که سعی می‌کنیم به آن مقدار به عنوان یک متد دسترسی پیدا کنیم، خطا رخ می‌دهد.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
console.log(student.getName()); // error
console.log(student.getName()); // error
console.log(student.getName()); // error

متد setter در جاوااسکریپت

در جاوااسکریپت برای تغییر مقادیر یک آبجکت از متدهای setter استفاده می‌کنیم. مثلا:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const student = {
firstName: 'Monica',
//accessor property(setter)
set changeName(newName) {
this.firstName = newName;
}
};
console.log(student.firstName); // Monica
// change(set) object property using a setter
student.changeName = 'Sarah';
console.log(student.firstName); // Sarah
const student = { firstName: 'Monica', //accessor property(setter) set changeName(newName) { this.firstName = newName; } }; console.log(student.firstName); // Monica // change(set) object property using a setter student.changeName = 'Sarah'; console.log(student.firstName); // Sarah
const student = {
    firstName: 'Monica',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Monica

// change(set) object property using a setter
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

در مثال بالا از متد setter برای تغییر مقدار آبجکت استفاده شده است.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
set changeName(newName) {
this.firstName = newName;
}
set changeName(newName) { this.firstName = newName; }
set changeName(newName) {
    this.firstName = newName;
}

نکته‌ای که باید به آن توجه کنیم این این است که برای ایجاد متد setter حتما باید از کلمه کلیدی

set
setاستفاده کنیم.

همانطور که در مثال بالا داریم مقدار

firstName
firstNameابتدا برابر با
Monica
Monicaمی‌باشد، سپس مقدار به
Sarah
Sarahتغییر پیدا می‌کند.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
student.changeName = 'Sarah';
student.changeName = 'Sarah';
student.changeName = 'Sarah';

نکته مهم دیگری که وجود دارد این است که متد setter  حتما باید یک پارامتر formal داشته باشد.

متد ()Object.defineProperty در جاوااسکریپت

در جاوااسکریپت برای اضافه کردن getterها و setterها می‌توانیم از متد

Object.defineProperty()
Object.defineProperty()نیز استفاده کنیم. به عنوان مثال:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const student = {
firstName: 'Monica'
}
// getting property
Object.defineProperty(student, "getName", {
get : function () {
return this.firstName;
}
});
// setting property
Object.defineProperty(student, "changeName", {
set : function (value) {
this.firstName = value;
}
});
console.log(student.firstName); // Monica
// changing the property value
student.changeName = 'Sarah';
console.log(student.firstName); // Sarah
const student = { firstName: 'Monica' } // getting property Object.defineProperty(student, "getName", { get : function () { return this.firstName; } }); // setting property Object.defineProperty(student, "changeName", { set : function (value) { this.firstName = value; } }); console.log(student.firstName); // Monica // changing the property value student.changeName = 'Sarah'; console.log(student.firstName); // Sarah
const student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

در مثال بالا متد

Object.defineProperty()
Object.defineProperty()برای دسترسی و تغییر ویژگی یک آبجکت مورد استفاده قرار می‌گیرد. سینتکس استفاده از این متد به صورت زیر می‌باشد:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty(obj, prop, descriptor)

متد

Object.defineProperty()
Object.defineProperty() سه آرگومان دریافت می‌کند:

  • اولین آرگومان نام آبجکت را شامل می‌شود
  • دومین آرگومان نام property را دربرمی‌گیرد
  • و سومین آرگومان یک آبجکت است که آن ویژگی را توصیف می‌کند

جمع‌بندی

get و set دو کلمه کلیدی بسیار مهم هستند که با استفاده از آن‌ها می‌توانیم به راحتی متدهای getter و setter را در جاوااسکریپت تعریف کنیم. متد getter مقدار ویژگی را برمی‌گرداند، در حالی که در متد setter یک آرگومان به متد setter ارسال می‌شود که آن مقدار خاص را به ویژگی آبجکت جاوااسکریپت اختصاص می‌دهد.

دیدگاه‌ها:

افزودن دیدگاه جدید