ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته
توصیه میکند:
29
خصوصیات (Properties) در اشیاء جاوا اسکریپت
19 اسفند 1397
درس 2 از سری جاوا اسکریپت پیشرفته
با سلامی گرم خدمت شما همراهان همیشگی روکسو، در این جلسه می خواهیم در رابطه با مبحث خصوصیات (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 ها این است که تعیین کنند یک خصوصیت به چه صورتی قابل دسترس است. به طور مثال آیا قابل خواندن است؟ آیا قابل نوشتن نیز هست؟
امیدوارم این قسمت مورد پسند شما قرار گرفته باشد.
ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته
توصیه میکند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.