خصوصیات (Properties) در اشیاء جاوا اسکریپت

19 اسفند 1397
Advanced-Javascript-properties

با سلامی گرم خدمت شما همراهان همیشگی روکسو، در این جلسه می خواهیم در رابطه با مبحث خصوصیات (property) در اشیاء جاوا اسکریپت صحبت کنیم. از جهات مختلفی می توان گفت خصوصیات، مهم ترین قسمت یک شیء هستند بنابراین با آن ها شروع می کنیم و در جلسه ی بعد به سراغ متدها نیز خواهیم رفت.

خصوصیات (Properties) در اشیاء جاوا اسکریپت

همانطور که در جلسه ی قبل به صورت خلاصه بیان شد خصوصیات مقادیری هستند که به یک شیء داده شده اند و می توان گفت یک شیء مجموعه ای از خصوصیات مرتب نشده است. حتما می دانید که ما می توانیم خصوصیات را حذف یا اضافه کرده و یا تغییر دهیم اما برخی از آن ها نیز غیر قابل تغییر هستند. بیایید به بررسی این موارد بپردازیم.

دسترسی به خصوصیات

نحوه ی دسترسی به خصوصیات یک شیء در زبان جاوا اسکریپت به شکل زیر است:

objectName.property         // person.age

یا

objectName["property"]      // person["age"]

یا

objectName[expression]      // x = "age"; person[x]

به دو مثال زیر توجه کنید. مثال اول:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>There are two different ways to access an object property:</p>
<p>You can use .property or ["property"].</p>

<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

برای اجرای این کد به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

مثال دوم:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>You can use .property or ["property"].</p>

<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

برای اجرای این کد به ادیتور آنلاین جاوا اسکریپت مراجعه کنید.

همانطور که می بینید هر دو روش یک نتیجه را بر میگردانند و انتخاب با شماست که از کدام روش استفاده کنید.

استفاده از حلقه ی for...in

حلقه ی for...in در جاوا اسکریپت بین تمام خصوصیات یک شیء گردش می کند و بر اساس کدی که برایش بنویسید عمل خاصی را انجام می دهد. اگر از دوره ی قبلی یادتان بیاید ساختار این حلقه به شکل زیر است:

for (variable in object) {
  // code to be executed
}

بلوک کدی که داخل حلقه ی for...in قرار بگیرد روی تک تک خصوصیت های شیء اجرا می شود. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p id="demo"></p>

<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25}; 
var x;
for (x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

مشاهده ی خروجی این کد در JSBin

اضافه کردن خصوصیات جدید

برای اضافه کردن خصوصیات جدید کافی است از همان قانون دسترسی به خصوصیات استفاده کنید. مثال:

var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

خروجی این کد عبارت ".John is English" خواهد بود.

نکته: شما اجازه ندارید از کلمات رزرو شده برای نام گذاری خصوصیات اشیاء استفاده کنید. قوانین مربوط به نام گذاری متغیر ها در زمینه ی خصوصیات اشیاء نیز صادق هستند. اگر از دوره ی قبل یادتان باشد کلمات رزرو شده در زبان های برنامه نویسی کلمات خاصی هستند که از قبل توسط توسعه دهندگان‌شان جهت امور خاصی رزرو شده اند. مثلا کلمه ی function یک کلمه ی رزرو شده است که برای تعریف توابع استفاده می شود. شما نمی توانید نام متغیر های خود را function بگذارید. البته می توانید به آن چیزی اضافه کنید؛ به طور مثال myFucntion کاملا پذیرفته است.

برای مشاهده ی لیست کامل کلمات رزرو شده در جاوا اسکریپت روی این لینک کلیک کنید.

حذف خصوصیات

کلیدواژه ی delete می تواند خصوصیت خاصی را از یک شیء حذف کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>

<p>You can delete object properties.</p>

<p id="demo"></p>

<script>
var person = {
  firstname:"John",
  lastname:"Doe",
  age:50,
  eyecolor:"blue"
};

delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

مشاهده ی خروجی این کد در JSBin

همانطور که می بینید خروجی این کد عبارت ".John is undefined years old" می باشد که یعنی سن و سال John از شیء حذف شده و حالا مقدار undefined را به ما برگردانده است.

چند نکته در مورد کلیدواژه ی delete :

  • این کلیدواژه هم خصوصیت را حذف میکند و هم مقدار آن خصوصیت را.
  • پس از استفاده از delete دیگر نمی توان به آن خصوصیت دسترسی داشت مگر آن که دوباره آن را ساخت.
  • این کلیدواژه جهت استفاده بر خصوصیات (property) اشیاء ساخته شده است و روی توابع یا متغیر ها اثری ندارد.
  • نباید از این کلیدواژه روی خصوصیات پیش فرضی استفاده کنید که خود جاوا اسکریپت آن ها را تعریف کرده است. اگر چنین کاری انجام دهید ممکن است برنامه ی شما به طور کلی متوقف شود.

Attribute چیست؟

تمام خصوصیات (propery) دارای یک نام و یک مقدار هستند (ر.ک جلسه ی قبل). حالا این نام، یک attribute (به معنی «ویژگی») برای آن property محسوب می شود. attribute های دیگر شامل enumerable (به معنی قابل شمارش)، configurable (به معنی قابل تنظیم) و writable (به معنی قابل نوشتن) هستند. در واقع کار این attribute ها این است که تعیین کنند یک خصوصیت به چه صورتی قابل دسترس است. به طور مثال آیا قابل خواندن است؟ آیا قابل نوشتن نیز هست؟

امیدوارم این قسمت مورد پسند شما قرار گرفته باشد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (3 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

mohammad
25 آبان 1400
.Thank you so much. it's excellent

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

شهنام
29 آبان 1399
سلام خدمت آقای زوارمی عزیز سوالی که برای بنده پیش اومده این که چرا زمانی که از کلید واژه delete استفاده می‌کنیم مقدار undefined برای ما برگردونده میشه مگه undefined برا زمانی نیست که پروپرتی تعریف شده اما مقدار نه؟ بنظرم باید null باشه چون نه name وجود داره و نه value انگار که اصلا وجود نداشته...

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ارسلان
21 اسفند 1397
سلام - ممنون عالی بود ادامه بدین لطفا

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
22 اسفند 1397
سلام دوست عزیز خوشحالم که از دوره راضی هستید، حتما ادامه پیدا خواهد کرد

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.