ویژگی Getter و Setter در جاوا اسکریپت

Getter و Setter در جاوا اسکریپت چه چیزی هستند و از کجا در آن ها استفاده میشود؟ در این پست آموزشی از مکتب خونه میخواهیم در رابطه با ویژگی Getter و Setter باهم به گفتگو بپردازیم. پس تا آخر این مقاله ما را همراهی کنید.

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

دو نوع ویژگی شی وجود دارد.

• اولین نوع، ویژگی های داده است. این ویژگی ها معمولی هستند و به وفور از آن ها در برنامه نویسی جاوا اسکریپت استفاده میشود.
• نوع دوم ویژگی ها یک ویژگی جدید در جاوا اسکریپت است که به ویژگی دسترسی یا Accessor معروف است. آنها در اصل توابعی هستند که با گرفتن و تنظیم یک مقدار اجرا می شوند، اما شبیه ویژگی های معمولی یک کد خارجی هستند. ویژگی های Accessor با روش های Getter و Setter در جاوا اسکریپت نشان داده می شوند. در یک قطعه کد جاوا اسکریپت با get و set آن ها را نشان می دهند:

مثالی از Getter و Setter در جاوا اسکریپت

let obj = {

  get propName() {
    // getter, the code executed on getting obj.propName

  },

  set propName(value) {

    // setter, the code executed on setting obj.propName = value

  }
};

getter زمانی که object.propName خوانده می شود کار می کند و Setter زمانی که به آن متغیر مقداری اختصاص داده می شود. به عنوان مثال، ما یک شی کاربر با نام و نام خانوادگی داریم. من ایهنجا از نام و نام خانوادگی خودم استفاده کرده ام.

let user = {

  name: "kamel",

  surname: "bahrami"

};

اکنون می خواهیم یک ویژگی fullName اضافه کنیم که باید “kamel bahrami” باشد. بنابراین می‌توانیم آن را به عنوان یک دسترسی پیاده‌سازی کنیم:

let user = {

  name: "kamel",

  surname: "bahrami",

  get fullName() {

    return `${this.name} ${this.surname}`;

  }

};

alert(user.fullName); // kame bahrami

از بیرون، یک ویژگی Accessor مانند یک ویژگی معمولی به نظر می رسد. این ایده ویژگی های دسترسی است. ما user.fullName را به‌عنوان تابعی صدا نمی‌زنیم، آن را به طور معمول می‌خوانیم: getter در پشت صحنه اجرا می‌شود.

در حال حاضر، fullName فقط یک getter دارد. اگر بخواهیم user.fullName= را اختصاص دهیم، خطایی رخ می دهد:

let user = {

  get fullName() {

    return `...`;

  }

};

user.fullName = "Test"; // Error (property has only a getter)

بیایید با افزودن یک setter برای user.fullName آن خطا را برطرف کنیم:

let user = {

  name: "kamel",

  surname: "bahrami",

  get fullName() {

    return `${this.name} ${this.surname}`;

  },

  set fullName(value) {

    [this.name, this.surname] = value.split(" ");

  }

};

// set fullName is executed with the given value.

user.fullName = "ALI AHMADI";

alert(user.name); // ALI

alert(user.surname); // AHMADI

در نتیجه، یک ویژگی “مجازی” fullName داریم. قابل خواندن و نوشتن است. دقیقا نقش Getter و Setter در جاوا اسکریپت ساخت این ویژگی مجازی برای دسترسی ایجاد دسترسی آسانتر است.

پیشنهاد مطالعه: آموزش متد bind در جاوا اسکریپت به زبان ساده

توصیفگرهای دسترسی یا Accessor descriptors

توصیف کننده ها برای ویژگی های دسترسی با توصیف کننده های ویژگی های داده متفاوت است. برای ویژگی های دسترسی، هیچ مقدار یا قابل نوشتن وجود ندارد، اما در عوض توابع get و set در جاوا اسکریپت وجود دارد. یعنی یک توصیفگر دسترسی ممکن است دارای عناصر زیر باشد:

• get – تابعی بدون آرگومان که هنگام خواندن یک ویژگی کار می کند،
• set – تابعی با یک آرگومان که با تنظیم ویژگی فراخوانی می شود.
• قابل شمارش enumerable – مانند خصوصیات داده،
• قابل تنظیم configurable – مانند ویژگی های داده.

به عنوان مثال، برای ایجاد یک accessor fullName با defineProperty، می‌توانیم یک توصیفگر را با get و set ارسال کنیم:

let user = {

  name: "kamel",

  surname: "bahrami"

};

Object.defineProperty(user, 'fullName', {

  get() {

    return `${this.name} ${this.surname}`;

  },

  set(value) {

    [this.name, this.surname] = value.split(" ");

  }

});

alert(user.fullName); // kamel bahrami

for(let key in user) alert(key); // name, surname

لطفاً توجه داشته باشید که یک ویژگی می تواند یک دسترسی (دارای متدهای get/set) یا یک ویژگی داده (دارای مقدار) باشد، نه هر دو.

اگر بخواهیم هم get و هم مقدار را در یک توصیفگر ارائه کنیم، یک خطا وجود دارد:

Object.defineProperty({}, 'prop', {

  get() {

    return 1

  },

  value: 2

});

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

get و set در جاوا اسکریپت می‌توانند به‌عنوان بسته‌بندی بر روی مقادیر واقعیبرای به دست آوردن کنترل بیشتر بر عملیات با آنها استفاده شوند. به عنوان مثال، اگر بخواهیم نام‌های خیلی کوتاه را برای کاربر ممنوع کنیم، می‌توانیم یک تنظیم‌کننده نام داشته باشیم و مقدار را در یک ویژگی مجزا نگه داریم. ویژگی مانند _name:

let user = {
get name() {
  return this._name;
},

set name(value) {
 if (value.length

alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

user.name = "kamel";
alert(user.name); // kamel
user.name = ""; // Name is too short...

بنابراین، نام در ویژگی _name ذخیره می شود و دسترسی از طریق getter و setter انجام می شود.

از لحاظ فنی، کد خارجی می تواند با استفاده از user._name به طور مستقیم به نام دسترسی پیدا کند. اما یک قرارداد کاملاً شناخته شده وجود دارد که مشخص می کند ویژگی هایی که با اندر لاین “_” شروع می شوند داخلی هستند و نباید از خارج از شی قابل دسترسی باشند.

پیشنهاد مطالعه: کلمه کلیدی let در جاوا اسکریپت

استفاده از Accessor برای سازگاری

یکی از کاربردهای عالی Accessor ها این است که آنها اجازه می دهند تا هر لحظه با جایگزین کردن یک گیرنده (getter ) و تنظیم کننده (setter ) و تغییر رفتار آن، بر روی یک ویژگی داده “عادی” کنترل داشته باشیم.

فرض کنید ما شروع به ساخت یک شی کاربر با استفاده از نام و سن ویژگی های داده کردیم:

function User(name, age) {

  this.name = name;

  this.age = age;

}

let kamel = new User("kamel", 28);
alert( kamel.age ); // 28

اما دیر یا زود ممکن است همه چیز تغییر کند. به جای سن ممکن است تصمیم بگیریم  ویژگی تولد را ذخیره کنیم، به مثال زیر دقت کنید:

function User(name, birthday) {

  this.name = name;

  this.birthday = birthday;

}

let kamel = new User("kamel", new Date(1994, 12, 15));

حالا با کد قدیمی که هنوز از ویژگی age استفاده می کند چه باید کرد؟ ما می‌توانیم  همه چنین مکان‌هایی که این ویژگی قدیمی در آن استفاده میشود را پیدا کنیم و آنها از لحاظ خطایی برطرف کنیم، اما این کار زمان می‌برد و اگر این کد توسط افراد زیادی استفاده شود، انجام این کار دشوار است. پس باید ان را نگه داریم.

اضافه کردن یک getter برای ویژگی سن در این مثال مشکل را حل می کند. به مثال زیر دقت کنید.

function User(name, birthday) {

  this.name = name;

  this.birthday = birthday;

  // سن از تاریخ و روز تولد فعلی محاسبه می شود

  Object.defineProperty(this, "age", {

    get() {

      let todayYear = new Date().getFullYear();

      return todayYear - this.birthday.getFullYear();

    }

  });

}

let john = new User("kamel", new Date(1992, 12, 15));

alert( kamel.birthday ); // birthday is available

alert( kamel.age );      // ...as well as the age

اکنون کد قدیمی نیز کار می کند و هیچ خطایی نیز اتفاق نمی افتد.

خلاصه

از کلمات کلیدی get و set در جاوا اسکریپت برای تعریف Getter و Setter در جاوا اسکریپت برای یک کلاس یا یک شی استفاده کنید. کلمه کلیدی get یک ویژگی شی را به روشی متصل می کند که با جستجوی آن ویژگی فراخوانی می شود. کلمه کلیدی set یک ویژگی شی را به روشی متصل می کند که با اختصاص آن ویژگی فراخوانی می شود.