روش‌های دسترسی به شیء در جاوا اسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
۱تعریف شیء
۲ویژگی‌های اشیاء
۳متدهای اشیاء
۴روش‌های دسترسی به شیء
۵سازنده‌های شیء
۶شکل اصلی شیء
۷متدهای شیء در نسخهٔ ES5
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

روش های دسترسی در جاوا اسکریپت (متدهای Getters و Setters)

در نسخه ECMAScript 5 (2009) متدهای Getter و Setters تعریف شدند.[۱]

متدهای getter و setter به شما اجازه می‌دهد که برای شی خود دسترسی دهنده (برای ویژگی‌های محاسبه شده) تعریف کنید.

متد Getter (کلمه کلیدی get)

این مثال از خصوصیت lang برای get کردن خصوصیت language استفاده می‌کند.

مثال

 1 // Create an object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   language : "en",
 6   get lang() {
 7     return this.language;
 8   }
 9 };
10 
11 // Display data from the object using a getter:
12 document.getElementById("demo").innerHTML = person.lang;

متد Setter (کلمه کلیدی set)

این مثال از خصوصیت lang برای set کردن خصوصیت language استفاده می‌کند.

مثال

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   language : "",
 5   set lang(lang) {
 6     this.language = lang;
 7   }
 8 };
 9 
10 // Set an object property using a setter:
11 person.lang = "en";
12 
13 // Display data from the object:
14 document.getElementById("demo").innerHTML = person.language;

تابع (به انگلیسی: Getter) در جاوا اسکریپت؟

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

مثال ۱

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   fullName : function() {
 5     return this.firstName + " " + this.lastName;
 6   }
 7 };
 8 
 9 // Display data from the object using a method:
10 document.getElementById("demo").innerHTML = person.fullName();

مثال ۲

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   get fullName() {
 5     return this.firstName + " " + this.lastName;
 6   }
 7 };
 8 
 9 // Display data from the object using a getter:
10 document.getElementById("demo").innerHTML = person.fullName;

مثال ۱ به fullName همانند یک تابع دسترسی پیدا می‌کند: person.fullName()

مثال ۲ به fullName به صورت یک ویژگی دسترسی پیدا می‌کند: person.fullName

مثال دوم از شیوه نوشتار (به انگلیسی: syntax) ساده‌تری برخوردار است.

کیفیت داده

جاوا اسکریپت می‌تواند زمانی که شما از getters و setters استفاده می‌کنید کیفیت داده بهتری را ارائه دهد.

با استفاده از ویژگی language در مثال زیر، مقدار ویژگی lang به صورت تمام حروف بزرگ به ما برمی گردد:

مثال

 1 // Create an object:
 2 var person = {
 3   firstName: "John",
 4   lastName : "Doe",
 5   language : "en",
 6   get lang() {
 7     return this.language.toUpperCase();
 8   }
 9 };
10 
11 // Display data from the object using a getter:
12 document.getElementById("demo").innerHTML = person.lang;

استفاده از ویژگی language در مثالزیر، مقدار تمام حروف بزرگ را در ویژگی lang ذخیره می‌کند:

مثال

 1 var person = {
 2   firstName: "John",
 3   lastName : "Doe",
 4   language : "",
 5   set lang(lang) {
 6     this.language = lang.toUpperCase();
 7   }
 8 };
 9 
10 // Set an object property using a setter:
11 person.lang = "en";
12 
13 // Display data from the object:
14 document.getElementById("demo").innerHTML = person.language;

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

  • شیوه نوشتار ساده‌تری را دارد
  • این امر به ما اجازه می‌دهد که از شیوه نوشتار یکسانی برای ویژگی‌ها و متدها استفاده کنیم
  • موجب افزایش کیفیت داده می‌شود
  • این روش برای انجام کارهایی در پس زمینه مناسب است

متد Object.defineProperty()

از متد Object.defineProperty() همچنین می‌توان برای اضافه کردن متدهای Getters و Setters استفاده کرد:

مثال

 1 // Define object
 2 var obj = {counter : 0};
 3 
 4 // Define setters
 5 Object.defineProperty(obj, "reset", {
 6   get : function () {this.counter = 0;}
 7 });
 8 Object.defineProperty(obj, "increment", {
 9   get : function () {this.counter++;}
10 });
11 Object.defineProperty(obj, "decrement", {
12   get : function () {this.counter--;}
13 });
14 Object.defineProperty(obj, "add", {
15   set : function (value) {this.counter += value;}
16 });
17 Object.defineProperty(obj, "subtract", {
18   set : function (value) {this.counter -= value;}
19 });
20 
21 // Play with the counter:
22 obj.reset;
23 obj.add = 5;
24 obj.subtract = 1;
25 obj.increment;
26 obj.decrement;

سازگاری با مرورگرها

متدهای Getters و Setters در اینترنت اکسپلور نسخه ۸ یا قدیمی تر پشتیبانی نمی‌شوند:

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
بله ۹٫۰ بله بله بله


منابع آموزشی