وصول‌کنندگان شیء JavaScript

جاوااسکریپت دسترسی‌دهنده (Getter و Setter)

ECMAScript 5 (2009) Getter و Setter را معرفی کرد.

Getter و Setter به شما امکان می‌دهد تا دسترسی‌دهنده‌های شیء (ویژگی‌های محاسباتی) را تعریف کنید.

جاوااسکریپت Getter (کلمه کلیدی get)

این مثال از lang ویژگی برای دریافت استفاده می‌شود language مقدار ویژگی.

مثال

// اشیاء ایجاد کنید:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// از getter برای نمایش داده‌های موجود در اشیاء استفاده کنید:
document.getElementById("demo").innerHTML = person.lang;

با دست خود امتحان کنید

جاوااسکریپت Setter (کلمه کلیدی set) استفاده می‌کند

این مثال از lang ویژگی برای تنظیم استفاده می‌شود language مقدار ویژگی.

مثال

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// از setter برای تنظیم ویژگی‌های اشیاء استفاده کنید:
person.lang = "en";
// نمایش داده‌های موجود در اشیاء:
document.getElementById("demo").innerHTML = person.language;

با دست خود امتحان کنید

توابع جاوااسکریپت یا Getter؟

تفاوت بین دو مثال زیر چیست؟

مثال 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// از روش برای نمایش داده‌های موجود در یک شی استفاده می‌شود:
document.getElementById("demo").innerHTML = person.fullName();

با دست خود امتحان کنید

مثال 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// از getter برای نمایش داده‌های موجود در اشیاء استفاده کنید:
document.getElementById("demo").innerHTML = person.fullName;

با دست خود امتحان کنید

مثال 1 به صورت تابع به fullName دسترسی دارد: person.fullName()。

مثال 2 به صورت ویژگی به fullName دسترسی دارد: person.fullName。

مثال دوم یک دستورالعمل ساده‌تر ارائه می‌دهد.

کیفیت داده‌ها

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

در این مثال، از lang ویژگی‌ها به صورت بزرگ‌نوشته بازمی‌گردانند language مقدار ویژگی:

مثال

// اشیاء ایجاد کنید:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// از getter برای نمایش داده‌های موجود در اشیاء استفاده کنید:
document.getElementById("demo").innerHTML = person.lang;

با دست خود امتحان کنید

در این مثال، از lang ویژگی‌ها مقدار بزرگ شده را در language در ویژگی‌ها:

مثال

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// از setter برای تنظیم ویژگی‌های اشیاء استفاده کنید:
person.lang = "en";
// نمایش داده‌های موجود در اشیاء:
document.getElementById("demo").innerHTML = person.language;

با دست خود امتحان کنید

چرا باید از Getter و Setter استفاده کرد؟

  • این یک نحوه‌ی ساده‌تر ارائه می‌دهد
  • این اجازه می‌دهد که نحوه‌ی نوشتن属性 و روش‌ها مشابه باشد
  • این اطمینان می‌دهد که کیفیت داده‌ها بهتر است
  • برای کارهای پشتیبان مناسب است

یک نمونه شمارنده

مثال

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};
// عملیات شمارنده:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

با دست خود امتحان کنید

Object.defineProperty() روش‌های نیز می‌توانند برای اضافه کردن Getter و Setter استفاده شوند:

مثال

// تعریف اشیاء
var obj = {counter : 0};
// تعریف setters
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;

با دست خود امتحان کنید

پشتیبانی مرورگر

نسخه‌های 8 و قبل از آن از Internet Explorer از Getter و Setter پشتیبانی نمی‌کنند:

بله 9.0 بله بله بله