۲۳
آبان

جلسه ۶۱ : دسترسی به آبجکت در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، در بخش های قبلی که استاندارد ECMAScript 5 را بررسی می کردیم، به ویژگی های Getter و Setters نیز تا حدودی اشاره کردیم، که در واقع از روش های دسترسی به آبجکت در جاوا اسکریپت می باشند. که اجازه ی تعریف Object Accessors در جاوا اسکریپت را می دهند، برای آشنایی بهتر با Object Accessors در جاوا اسکریپت و یا دسترسی به آبجکت در جاوا اسکریپت در ادامه ی این بخش با ما همراه باشید.

دسترسی به آبجکت در جاوا اسکریپت

در ادامه ی این مبحث شما با انواع Object Accessors در جاوا اسکریپت آشنا خواهید شد.

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

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

مثال : دریافت مقدار از ویژگی language

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

// Create an object:

var person = {

firstName: "John",

lastName : "Doe",

language : "en",

get lang() {

return this.language;

}

};

// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.lang;

خودتان امتحان کنید »

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

در این مثال نیز از یک خصوصیت lang برای تنظیم مقدار خصوصیت language استفاده شده است :

مثال : تنظیم مقدار lang

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

var person = {

firstName: "John",

lastName : "Doe",

language : "",

set lang(lang) {

this.language = lang;

}

};

// Set an object property using a setter:

person.lang = "en";

// Display data from the object:

document.getElementById("demo").innerHTML = person.language;

خودتان امتحان کنید »

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

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

مثال : روش استفاده از متد

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();

var person = {

firstName: "John",

lastName : "Doe",

fullName : function() {

return this.firstName + " " + this.lastName;

}

};

// Display data from the object using a method:

document.getElementById("demo").innerHTML = person.fullName();

خودتان امتحان کنید »

مثال : روش استفاده از getter

var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

var person = {

firstName: "John",

lastName : "Doe",

get fullName() {

return this.firstName + " " + this.lastName;

}

};

// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.fullName;

خودتان امتحان کنید »

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

مثال ۲- دسترسی به fullName به عنوان یک خصوصیت : person.fullName.

در نتیجه مثال دوم، سینکس ساده تری را ارائه می دهد.

کیفیت داده

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

استفاده از property lang، در این مثال، مقدار خصوصیات زبان را به صورت بزرگ نشان می دهد:

مثال : استفاده از خصوصیت lang

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

// Create an object:

var person = {

firstName: "John",

lastName : "Doe",

language : "en",

get lang() {

return this.language.toUpperCase();

}

};

// Display data from the object using a getter:

document.getElementById("demo").innerHTML = person.lang;

خودتان امتحان کنید »

با استفاده از خصوصیت lang، در این مثال، مقدار بالایی را در خصوصیت زبان language می کند:

مثال : استفاده از lang برای ذخیره ی مقدار در language

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

var person = {

firstName: "John",

lastName : "Doe",

language : "",

set lang(lang) {

this.language = lang.toUpperCase();

}

};

// Set an object property using a setter:

person.lang = "en";

// Display data from the object:

document.getElementById("demo").innerHTML = person.language;

خودتان امتحان کنید »

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

این سینتکس ساده تری را ارائه می دهد.
این اجازه می دهد تا سینتکس برابر برای خصوصیات و متدها ارائه شود.
این می تواند کیفیت داده ها را بهتر تامین کند.
این کار برای انجام کارها در پشت صحنه مفید است.

یک مثال شمارنده

مثال : ایجاد شمارنده

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;
  }
};

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

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;

}

};

// Play with the counter:

obj.reset;

obj.add = 5;

obj.subtract = 1;

obj.increment;

obj.decrement;

خودتان امتحان کنید »

متد ()Object.defineProperty

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

مثال : متد Object.defineProperty

// Define object
var obj = {counter : 0};

// Define 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;}
});

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

// Define object

var obj = {counter : 0};

// Define 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;}

});

// Play with the counter:

obj.reset;

obj.add = 5;

obj.subtract = 1;

obj.increment;

obj.decrement;

خودتان امتحان کنید »

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

Getters و Setters در مرورگر Internet Explorer 8 و نسخه های قدیمی تر از آن، پشتیبانی نمی شود :

Chrome	Edge	Firefox	Safari	Opera
Yes	۹٫۰	Yes	Yes	Yes

کلام آخر

یکی از ویژگی هایی که در استاندارد ECMAScript 5 ارائه شده و سینتکس ساده تری را نسبت به برخی توابع ارائه می دهد، Getter و Setters می باشد، که کاربرد عمده ی آن ها دسترسی به آبجکت در جاوا اسکریپت می باشد، که در این بخش به آن پرداختیم.

به اشتراک بگذارید

دسترسی به آبجکت در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۶۱ : دسترسی به آبجکت در جاوا اسکریپت

مقدمه

دسترسی به آبجکت در جاوا اسکریپت

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

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

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

کیفیت داده

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

یک مثال شمارنده

متد ()Object.defineProperty

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

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ