شیء (Object) در جاوا اسکریپت — راهنمای کاربردی

۹۶۳ بازدید

آخرین به‌روزرسانی: ۰۸ شهریور ۱۴۰۲

زمان مطالعه: ۹ دقیقه

شیء (Object) در جاوا اسکریپت — راهنمای کاربردی

در این راهنما به بررسی ساختار بنیادی شیء جاوا اسکریپت می‌پردازیم و برخی ویژگی‌های جاوا اسکریپت را بررسی می‌کنیم که در بخش‌های قبلی این سری مطالب آموزش عملی جاوا اسکریپت مشاهده کرده‌ایم. شی نمونه یا وهله‌ای از یک کلاس در برنامه نویسی محسوب می‌شود. یک بار دیگر تکرار می‌کنیم که بسیاری از ویژگی‌هایی که قبلاً دیده‌ایم در واقع به صورت شیء در جاوا اسکریپت هستند.

فهرست مطالب این نوشته

از شیءها در همه جا استفاده می‌کنیم

جمع‌بندی

پیش‌نیازها

سواد مقدماتی رایانه
درکی ابتدایی از HTML و CSS
آشنایی با مبانی جاوا اسکریپت که از طریق مطالعه مطلب زیر حاصل می‌شود:
- «جاوا اسکریپت چیست؟ — به زبان ساده»

هدف از این مقاله درک تئوری مقدماتی برنامه‌نویسی شیءگرا، ارتباط آن با جاوا اسکریپت که اغلب چیزها در آن شیء محسوب می‌شوند و شیوه آغاز به کار با اشیای جاوا اسکریپت است. همچنین برای مطالعه قسمت قبلی این مجموعه مطلب آموزشی می‌توانید روی لینک زیر کلیک کنید:

ساخت گالری تصاویر در جاوا اسکریپت — راهنمای کاربردی

مبانی شیء

شیء به مجموعه‌ای از داده‌ها یا کارکردهای مرتبط با هم گفته می‌شود که به طور معمول شامل چندین متغیر و تابع است که خصوصیات و متد نام دارند و درون شیء تعریف می‌شوند. در ادامه مثالی ارائه می‌کنیم تا کارکرد شیء را بهتر درک کنیم.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

در ابتدا یک فایل به نام oojs.html روی سیستم خود ایجاد کرده و کد زیر را در آن کپی کنید:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Object-oriented JavaScript example</title>
6  </head>
7
8  <body>
9    <p>This example requires you to enter commands in your browser's JavaScript console (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information).</p>
10
11  </body>
12
13    <script>
14    </script>
15</html>

این فایل شامل یک اسکریپت کوچک است که کد خود را داخل آن می‌نویسیم. ما از این مبنا برای بررسی ساختار شیء ساده استفاده می‌کنیم. هنگامی که با این مثال کار می‌کنیم باید کنسول ابزارهای توسعه‌دهنده جاوا اسکریپت را در مرورگر خود باز کنید تا بتوانید برخی دستورها را در آن وارد کنید. بدین منظور می‌توانید از دکمه‌های میانبر Ctrl + Shift + I استفاده کنید.

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

1var person = {};

اینک کنسول جاوا اسکریپت مرورگر خود را باز کنید و عبارت person را در آن وارد کنید و دکمه Enter یا Return را بزنید. در این مرحله نتیجه‌ای مشابه خطوط زیر را دریافت می‌کنید:

1[object Object]
2Object { }
3{ }

بدین ترتیب ما موفق شده‌ایم نخستین شیء خود را ایجاد کنیم؛ اما این شیء خالی است و از این رو نمی‌توانیم کار زیادی با آن انجام دهیم. در ادامه شیء جاوا اسکریپت خود را به‌روزرسانی می‌کنیم تا به صورت زیر دربیاید:

1var person = {
2  name: ['Bob', 'Smith'],
3  age: 32,
4  gender: 'male',
5  interests: ['music', 'skiing'],
6  bio: function() {
7    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
8  },
9  greeting: function() {
10    alert('Hi! I\'m ' + this.name[0] + '.');
11  }
12};

پس از ذخیره کردن و رفرش آن می‌توانید برخی دستورهای زیر را در کنسول جاوا اسکریپت در ابزارهای توسعه‌دهنده مرورگر خود وارد کنید:

1person.name
2person.name[0]
3person.age
4person.interests[1]
5person.bio()
6person.greeting()

اینک مقداری داده و کارکرد درون شیء خود داریم و می‌توانیم با ساختاری ساده و زیبا به آن‌ها دسترسی داشته باشیم. شاید از خود بپرسید در این کد چه اتفاقی رخ می‌دهد؟ توضیح این است که هر شیء از چندین عضو تشکیل می‌یابد که هر یک از آن‌ها یک نام (مانند name و age در مثال فوق) و یک مقدار (مانند ['Bob'، 'Smith'] و 32) دارند. هر جفت نام/مقدار باید به وسیله یک کاما از هم جدا شود و نام و مقدار در هر مورد به وسیله یک کولون (:) از هم جدا می‌شوند. ساختار کلی این الگو چنین است:

1var objectName = {
2  member1Name: member1Value,
3  member2Name: member2Value,
4  member3Name: member3Value
5};

مقدار یک عضو شیء می‌تواند هر چیزی باشد. در مورد شیء person ما یک رشته، یک عدد، دو آرایه و دو تابع داریم. چهار آیتم نخست آیتم‌های داده‌ای هستند و به نام «مشخصات» (properties) شناخته می‌شوند. دو آیتم بعدی تابع‌هایی هستند که به شیء اجازه می‌دهند تا کاری روی داده‌ها انجام دهد و به نام متدهای شیء نامیده می‌شوند.

یک شیء مانند این را به عنوان «شیء لفظی» (object literal) می‌شناسیم، زیرا محتوای شیء را در زمان ایجاد کردن آن به صورت لفظ‌هایی نوشته‌ایم. این وضعیت در تضاد با شیء وهله‌سازی شده از کلاس‌ها است که در ادامه توضیح خواهیم داد.

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

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

نمادگذاری نقطه

در بخش فوق دیدیم که خصوصیات و متدهای شیء با استفاده از نمادگذاری نقطه قابل دسترسی هستند. نام شیء (person) به عنوان یک «فضای نام» (namespace) عمل می‌کند و باید در ابتدا وارد شود تا بتوانیم به هر چیزی که درون شیء کپسوله‌سازی شده است دسترسی داشته باشیم. سپس یک نقطه درج می‌شود و پس از آن آیتمی که می‌خواهیم به آن دسترسی پیدا کنیم قید می‌شود. این آیتم می‌تواند یک مشخصه ساده باشد، یا یک آیتم مشخصه آرایه باشد. همچنین می‌توانید یک فراخوانی برای یکی از متدهای شیء مانند زیر باشد:

1person.age
2person.interests[1]
3person.bio()

فضاهای نام فرعی

حتی این امکان وجود دارد که مقدار یک عضو شیء را به صورت یک شیء دیگر تعریف کنیم. برای نمونه می‌توانید عضو نام را از حالت زیر:

1name: ['Bob'، 'Smith']،

به صورت زیر تغییر دهید:

1name : {
2  first: 'Bob',
3  last: 'Smith'
4},

در این کد ما در واقع عملاً یک «فضای نام فرعی» (sub-namespace) ایجاد کرده‌ایم. این وضعیت پیچیده به نظر می‌رسد؛ اما در عمل چنین نیست. برای دسترسی به این آیتم‌ها کافی است از یک مرحله نقطه‌گذاری دیگر استفاده کنیم. برای مثال کد زیر را در کنسول مرورگر خود وارد کنید:

1person.name.first
2person.name.last

نکته مهم: در این مرحله، باید به بخش متدهای شیء بروید و همه وهله‌هایی که به صورت زیر هستند:

1name[0]
2name[1]

را به صورت زیر تغییر دهید:

1name.first
2name.last

در غیر این صوت متدهای شما کار نمی‌کنند.

نمادگذاری براکت

روش دیگری نیز برای دسترسی به مشخصه‌های شیء وجود دارد که استفاده از نمادگذاری براکت است. به جای نوشتن دستورهایی مانند زیر:

1person.age
2person.name.first

می‌توانید از دستورهای زیر استفاده کنید:

1person['age']
2person['name']['first']

این کد شباهت زیادی به روش دسترسی به آیتم‌ها در یک آرایه دارد و اساساً همان است؛ اما به جای شماره اندیس برای انتخاب یک آیتم، باید از فضای نام مرتبط با هر مقدار عضو استفاده کنیم. جای شگفتی نیست که این اشیا برخی اوقات «آرایه‌های انجمنی» (associative arrays) نامیده می‌شوند، زیرا از آن‌ها به ترتیبی مانند نگاشت اعداد به مقادیر در آرایه‌ها، برای نگاشت رشته‌ها به مقادیر استفاده می‌شوند.

تعیین اعضای شیء

تا به اینجا ما تنها اقدام به بازیابی (یا دریافت) عضوهای شیء کرده‌ایم؛ اما شما می‌توانید مقدار یک عضو شیء را نیز با اعلان عضو و تقاضا برای تنظیم یعنی استفاده از نمادگذاری نقطه یا براکت به صورت زیر تعیین کنید:

1person.age = 45;
2person['name']['last'] = 'Cratchit';

کدهای فوق را در مرورگر وارد کنید و سپس اعضا را بار دیگر دریافت کنید تا تغییرات را به صورت زیر مشاهده کنید:

1person.age
2person['name']['last']

تعیین اعضا صرفاً محدود به حالت به‌روزرسانی اعضای مشخصه‌ها و متدهای موجود نیست؛ بلکه می‌توانید اعضای کاملاً جدیدی را نیز بسازید. کد زیر را در کنسول وارد کنید:

1person['eyes'] = 'hazel';
2person.farewell = function() { alert("Bye everybody!"); }

اینک می‌توانید اعضای جدید را نیز تست کنید:

1person['eyes']
2person.farewell()

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

1var myDataName = nameInput.value;
2var myDataValue = nameValue.value;

سپس می‌توانیم نام و مقدار این عضو جدید را در شیء person به صورت زیر وارد کنیم:

1person[myDataName] = myDataValue;

برای تست کردن این حالت باید خطوط زیر را در کد، و درست زیر آکولادهای شیء person وارد کنیم:

1var myDataName = 'height';
2var myDataValue = '1.75m';
3person[myDataName] = myDataValue;

اینک فایل را ذخیره کرده و آن را در مرورگر رفرش کنید و مقادیر زیر را در ورودی متنی وارد کنید:

1person.height

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

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

this چیست؟

شاید در متدهایی که در بخش فوق معرفی کردیم متوجه چیز عجیبی به نام this شده باشید. به مثال زیر نیز توجه کنید:

1greeting: function() {
2  alert('Hi! I\'m ' + this.name.first + '.');
3}

شاید کنجکاو باشید که این this چیست؟ در واقع کلیدواژه this به شیء کنونی کدی که درون آن نوشته است اشاره می‌کند. بنابراین در این مورد this معادل person است. اما چرا نباید از خود person استفاده کنیم؟ دلیل این مسئله آن است که وقتی اقدام به ساخت سازه‌ها و موارد دیگر می‌کنیم، this بسیار مفید خواهد بود، چون در موارد تغییر چارچوب عضو، همواره مطمئن هستیم که مقادیر کنونی صحیح هستند. یعنی اگر دو وهله از شیء person داشته باشیم که نام‌های متفاوتی داشته باشند؛ اما بخواهیم هنگام خوشامدگویی از نام هر یک استفاده کنیم، به راحتی می‌توانیم از this استفاده کنیم.

منظور خود را در ادامه با یک جفت شیء person به صورت عملی مشخص می‌کنیم:

1var person1 = {
2  name: 'Chris',
3  greeting: function() {
4    alert('Hi! I\'m ' + this.name + '.');
5  }
6}
7
8var person2 = {
9  name: 'Brian',
10  greeting: function() {
11    alert('Hi! I\'m ' + this.name + '.');
12  }
13}

در این مورد، کد ()person1.greeting موجب ارائه رشته «.Hi! I'm Chris» در خروجی می‌شود؛ اما کد ()person2.greeting موجب می‌شود که خروجی ما به صورت «.Hi! I'm Brian» باشد؛ با این حال ساختار کد در هر دو مورد فوق یکسان است. همان طور که پیش‌تر گفتیم، this معادل شیئی است که کد درون آن نوشته شده است. این وضعیت در مواردی که شیءهای لفظی را به صورت دستی می‌نویسیم فایده چندانی نخواهد داشت؛ اما زمانی که شیءها را به صورت دینامیک ایجاد می‌کنیم، فایده اصلی خود را نشان می‌دهد. در ادامه در این خصوص بیشتر توضیح خواهیم داد.

از شیءها در همه جا استفاده می‌کنیم

زمانی که مثال‌های فوق را بررسی می‌کردیم احتمالاً متوجه شده‌اید که نمادگذاری نقطه که استفاده می‌کنیم کاملاً آشنا است. دلیل این مسئله آن است که ما در سراسر این دوره آموزشی از این نمادگذاری استفاده کرده‌ایم. هر بار که با یک مثال کار کرده‌ایم که با API داخلی یا شیء جاوا اسکریپت سر و کار دارد در واقع از شیءها استفاده کرده‌ایم، چون این ویژگی‌ها با استفاده از دقیقاً همان نوع از ساختار شیء که در این جا دیدیم ساخته شده‌اند و البته کمی پیچیده‌تر از انواعی هستند که ما در نمونه‌های سفارشی ابتدایی خود ارائه کردیم. بنابراین زمانی که از متدهایی مانند زیر استفاده می‌کنیم:

1myString.split('،');

در واقع از متدهای موجود روی وهله‌ای از کلاس String استفاده می‌کنیم. هر بار که یک رشته در کد خود ایجاد می‌کنید آن رشته به طور خودکار به صورت وهله‌ای از String ایجاد می‌شود و از این رو چند متد/مشخصه مشترک روی آن وجود دارد.

زمانی که مدل شیء سند را با استفاده از خطوطی مانند زیر مورد دسترسی قرار می‌دهید:

1var myDiv = document.createElement('div');
2var myVideo = document.querySelector('video');

در واقع از متدهای موجود روی وهله‌ای از کلاس Document استفاده می‌کنید. برای هر صفحه وبی که بارگذاری می‌شود، یک وهله از Document ایجاد می‌شود که document نام دارد و نماینده کل ساختار صفحه، محتوا و دیگر ویژگی‌ها مانند URL آن است. در این مورد نیز چندین متد/مشخصه مشترک روی آن وجود دارد.

همین وضعیت در مورد هر API یا شیء داخلی جاوا اسکریپت که مورد استفاده قرار می‌دهیم مانند Array ،Math و غیره صدق می‌کند.

دقت کنید که API یا شیءهای داخلی جاوا اسکریپت همواره به صورت خودکار وهله‌هایی از شیء می‌سازند. به عنوان مثال Notifications API که امکان نمایش اعلان‌های سیستمی روی مرورگرهای مدرن را فراهم می‌سازند، نیازمند این هستند که با استفاده از سازنده برای هر اعلانی که ارسال می‌کنند یک وهله جدیدی ایجاد کنند. کد زیر را در کنسول مرورگر خود وارد کنید:

1var myNotification = new Notification('Hello!');

نکته: بهتر است روش ارتباط شیءها با هم را مانند یک روش ارسال پیام تصور کنیم. زمانی که یک شیء به شیء دیگری برای اجرای نوع خاصی از کنش نیاز داشته باشد، در اغلب موارد از طریق یکی از متدهایش یک پیام به آن شیء دیگر ارسال می‌کند و منتظر پاسخ می‌ماند که به عنوان یک مقدار بازگشتی نامیده می‌شود.

جمع‌بندی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در بخش بعدی این سری مقالات آموزش جاوا اسکریپت به بررسی نظریه برنامه‌نویسی شیءگرا (OOP) و شیوه استفاده از تکنیک‌های آن در جاوا اسکریپت خواهیم پرداخت:

شی‌ گرایی در جاوا اسکریپت --- به زبان ساده

اگر این نوشته برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۱ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

developer.mozilla

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.