Object در جاوا اسکریپت چیست؟ – از صفر تا صد + مثال

اعلان چندین «متغیر» (Variable) برای ذخیره‌سازی مقادیر مختلف می‌تواند برنامه جاوا اسکریپت را نامرتب و خوانایی آن را کاهش دهد. برای رفع این مشکل، در جاوا اسکریپت و بسیاری از انواع زبان‌های برنامه نویسی، مفهومی به نام «شی» (Object) ارائه شده است که به کاربر امکان می‌دهد مقادیر مرتبط را با هم گروه‌بندی کند. Object در جاوا اسکریپت انواع داده‌های قدرتمندی به حساب می‌آید که می‌توانند مقادیر پیچیده را ذخیره کند و کاربر را قادر می‌سازد کدهای سازمان‌یافته و خواناتری ایجاد کند. در این مطلب به اصول اولیه اشیا در جاوا اسکریپت، نحوه ایجاد آن‌ها، کپی کردن آن‌ها، پیمایش آن‌ها و سایر موارد مرتبط پرداخته می‌شود. قبل از پرداختن به مفهوم Object در جاوا اسکریپت، داشتن درک اولیه‌ای از جاوا اسکریپت، از جمله متغیرها، توابع و انواع داده‌ها بسیار مهم است.

Object در جاوا اسکریپت چیست؟

در جاوا اسکریپت، شی یا همان Object نوعی داده است که می‌تواند مجموعه‌هایی از جفت‌های «کلید-مقدار» را در خود جای دهد. برخلاف انواع داده‌های اولیه مانند اعداد و رشته‌ها، اشیا می‌توانند انواع مختلفی از داده‌ها را به‌عنوان مقادیر در خود ذخیره کنند.

کلید یا نام ویژگی معمولاً از نوع رشته است، اگرچه هر نوع داده دیگری را می‌توان به رشته تبدیل کرد. شی را می‌توان به عنوان یک قفسه یا کمد چندمنظوره با فضایی برای وسایلی مانند: کتاب‌ها، فایل‌ها و غیره در نظر گرفت.

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

اشیا می‌توانند دارای متغیرها و توابع باشند. متغیرهای موجود در شی به عنوان ویژگی‌ و متغیرهای موجود در توابع به عنوان متد شناخته می‌شوند. متدها به شی اجازه می‌دهند تا از خصوصیات درون خود برای انجام کاری استفاده کند. به عنوان مثال، در کد زیر: object1.user،object1.nationality وobject1.professionهمگی ویژگی‌های object1 هستند، در حالی که object1.myBio()‎یک متد است. هنگامی که متد فراخوانی می‌شود، از ویژگی‌ها برای خروجی یک جمله استفاده می‌کند.

کلیدهای موجود در نمونه کد بالا «user » ،«Nationity» و «profession » هستند و مقادیر مربوط به آن‌ها مقادیر رشته‌ای محسوب می‌شوند که بعد از علامت دونقطه قرار می‌گیرند. علاوه بر این، کلمه کلیدی This در جاوا اسکریپت که در کدها استفاده می‌شود، به خود شی اشاره دارد. همان‌طور که قبلاً بیان شد، مقدار ویژگی می‌تواند هر نوع داده‌ای باشد. در این حالت، مقادیر هم آرایه و هم شی هستند.

سینتکس Object در جاوا اسکریپت

ایجاد Object در جاوا اسکریپت بسیار آسان است.

شی و ویژگی‌های آن را در داخل مجموعه‌ای از براکت‌ها تعریف می‌شوند که مثال زیر این موضوع را بیان می‌کند.

با این کار جسمی به نام myCup با سه ویژگی (color، volumeو weight) ساخته شد که هرکدام مقدار خاص خود را دارند.

سینتکس کوتاه تر شی در جاوا اسکریپت

شی نمونه کد بالا را می‌توان با «سینتکسی» (Sytnat) مختصرتر به صورت زیر نیز بازنویسی کرد:

در این مثال متغیر با استفاده از سینتکس let myCup = {}‎ اعلان می‌شود. در خط جدید، این سینتکس اولین ویژگی به صورت color: "transparent" نوشته خواهد شد. همچنین چون این ویژگی آخرین ویژگی شی مذکور نیست پس به یک کاما یا ویرگول در آخر خط نیاز است.

در خط بعد، ویژگی حجم به صورت ‎volume: 1, نوشته می‌شود و اینجا هم به کاما نیاز است. آخرین ویژگی این شی که weight باشد، بدون علامت کاما در آخر نوشته خواهد شد. بعد در آخر سر علامت براکت بسته و به این صورت Object در جاوا اسکریپت با سینتکسی مختصرتر و خواناتر تعریف می‌شود.

چه زمانی در انتهای خط باید از کاما استفاده کرد؟

هنگامی که هر یک از مقادیر ویژگی فهرست می‌شوند، باید در انتهای خطوط از کاما استفاده شود، ولی علامت کاما برای ویژگی آخر نوشته نخواهد شد. همچنین برخی از «کد ادیتورها» (Code Editors) ممکن است اجازه استفاده از کاما را برای آخرین ویژگی نیز بدهند، اما معمولاً بهتر است آخرین ویژگی بدون کاما نوشته شود.

نحوه دسترسی به Object و ایجاد ویژگی ها یا متدهای شی جدید

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

روش اول با استفاده از ذکر نام شی و ویژگی آن پشت سرم هم با علامت نقطه (.) در بین آن‌ها به صورت زیر است:

روش دوم استفاده از علامت کروشه باز وبسته «[]» است. در این روش به دنبال نام شی، ویژگی مدنظر در درون براکت به منظور ایجاد دسترسی به آن قرار می‌گیرد. سینتکس زیر این موضوع را بیان می‌کند.

هر دو خط کد بالا ویژگی‌های جدیدی را به object2 اضافه می‌کنند. خط اول از نماد نقطه استفاده می‌کند، در حالی که خط دوم از نماد براکت استفاده خواهد کرد. مثال زیر برای درک بهتر این موضوع بسیار حائز اهمیت است:

به صورت مشابه اشیا می‌توانند مقادیرشان را با استفاده از هر یک از نمادها تغییر دهند که مثال زیر این موضوع را نشان می‌دهد.

نشانه‌گذاری نقطه‌ای (استفاده از علامت یا نماد نقطه) پرکاربردترین روش برای دسترسی به ویژگی‌ها و عملکردهای یک شی است، با این حال، محدودیت‌هایی نیز دارد که در ادامه این محدودیت‌ها مورد بررسی قرار خواهند گرفت.

محدودیت در ویژگی‌ های چندکلمه‌ای

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

مثال زیر در رابطه با این موضوع است:

برای قطعه کد بالا، همان‌طور که معلوم است، نوعی خطای نحوی اتفاق می‌افتد، زیرا جاوا اسکریپت دستور را به عنوان object3.users می‌خواند و در این مورد طول رشته را شناسایی نمی‌کند. هنگامی که کاربر از نماد نقطه برای دسترسی به Object در زبان جاوا اسکریپت استفاده می‌کند، قوانین اعلان متغیر در جاوا اسکریپت برای آن لحاظ می‌شوند. این یعنی اگر کاربر از نماد نقطه برای دسترسی به شی و یا برای ایجاد ویژگی استفاده کند، باید قوانینی مانند عدم استفاده از اعداد برای نام‌گذاری نام ویژگی و عدم استفاده از فضای خالی در آن پیروی کند.

در این موارد کاربر مجاز است از آندرلاین (_) و کاراکتر خاص ($) در نام‌گذاری استفاده کند. برای اطمینان از عدم بروز چنین اشکالاتی، بهتر است از علامت براکت استفاده شود. مثال بالا با علامت براکت به صورت زیر بازنویسی می‌شود و هیچ‌گونه خطایی ایجاد نخواهد شد.

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

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

یکی از تکنیک‌های مهم در برنامه نویسی شی گرا، «وراثت» (Inheritance) است. وراثت در جاوا اسکریپت به معنی ایجاد شی فرزند برای به ارث بردن ویژگی‌های شی پدر خواهد بود. این یعنی کاربر می‌تواند فقط یک بار توابع را برای اشیا بنویسد و فقط مقادیر آن را تغییر دهد. این عملیات کار برنامه‌نویس را ساده می‌کند و تعداد خطاها را نیز کاهش می‌دهد.

راهی عالی برای بهره بردن از وراثت در جاوا اسکریپت، کار با «سازنده‌ها» (Constructor) است. همان‌طور که گفته شد، سازنده تابعی ویژه برای ساخت Object در جاوا اسکریپت است و این شی را برای استفاده آماده می‌کند. همچنین این سازنده آرگومان‌هایی را می‌گیرد که با استفاده از این آرگومان‌ها می‌توان مقادیر اولیه شی را تنظیم کرد.

مثال زیر برای بیان این مسئله مهم است:

در مثال فوق متغیری با نام const Table اعلان و با تابع برابر قرار داده شده است. همچنین برای این تابع از پارامترهای مختلفی مانند height ،width  ،length و color استفاده شده است.

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

کاربر می‌تواند Object در جاوا اسکریپت را با استفاده از دو روش ایجاد کند. این روش‌ها استفاده از «شی تحت اللفظی» (Object Literal) و استفاده از «سازنده شی» (Object Constructor) هستند. کلیه مثال‌هایی که تا به اینجا مورد بررسی قرار گرفتند از نوع Object Literal بودند.

روش Object Literal روشی بسیار مناسب برای ساخت شیئی واحد در زبان جاوا اسکریپت است و از طرفی استفاده از سازنده شی برای ایجاد چندین شی روشی مناسب‌تر محسوب می‌شود. استفاده از شی سازنده موجب جلوگیری از تکرار غیرضروری کد می‌شود و در کنار آن، تغییر ویژگی‌های شی با آن نیز آسان‌تر است.

سازنده‌ها توابعی هستند که نام آن‌ها معمولاً با حروف بزرگ نوشته می‌شود و این حروف بزرگ اصلاً تأثیری روی شی نخواهد داشت. برای ایجاد یک شی با استفاده از سازنده، باید سازنده را با کلمه کلیدیnewفراخوانی کرد. کلمه کلیدیnewنمونه‌ای از یک شی را ایجاد و کلمه کلیدی thisرا به شی جدید متصل می‌کند. کلمه کلیدیthisبه خودِ شی اشاره می‌کند. مثال زیر برای درک مفاهیم بیان شده در این بخش بسیار مهم است:

نحوه ایجاد کپی از شی در جاوا اسکریپت

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

برای ایجاد کپی از شی، می‌توان از «عملگر Spread» استفاده کرد.

عملگر Spread چیست؟

عملگر Spread در جاوا اسکریپت با علامت سه نقطه (...) نمایش داده می‌شود.  همچنین با استفاده از عملگر Spread می‌توان برای کپی کردن مقادیر هر عنصر «تکرارشونده‌ای» (Iterable) از جمله اشیا استفاده کرد.

عنصر «Iterable» در جاوا اسکریپت به شیئی گفته می‌شود که می‌توان آن را با کمک حلقه for در جاوا اسکریپت پیمایش کرد. برای مثال اشیا، آرایه‌ها، مجموعه‌ها، رشته‌ها و غیره همگی Iterable هستند. کاربر برای استفاده از عملگر Spread، باید آن را به عنوان پیشوند به شیئی که می‌خواهد از آن کپی تهیه کند، مانند مثال زیر بگذارد:

همان‌طور که قابل مشاهده است، برخلاف نمونه کد قبلی که تغییر درobject4باعث تغییر درobject5 شد، در مثال فوق تغییر درobject6منجر به تغییر درobject5نشده است.

نحوه استفاده از متد Object.assign

با استفاده از متدObject.assign()‎می‌توان تمامی خصوصیات قابل‌شمارش یک شی را در شی دیگر کپی کرد و سپس شی تغییریافته را بازگرداند. متد Object.assign در جاوا اسکریپت دو پارامتر می‌گیرد.

اولین پارامتر شی هدف است که ویژگی‌های کپی شده را می‌گیرد. پارامتر دوم شی منبع یا شی مبدأ محسوب می‌شود و دارای ویژگی‌هایی است که کاربر می‌خواهد کپی کند. مثال زیر برای این مفهوم بسیار مهم است:

در قطعه کد بالا، همان‌طور که قابل مشاهده است، تغییر مقدار ویژگیage برای object6 باعث تغییر در مقدار ویژگیageبرایobject7نشده است. توجه به این نکته که عملگر spread و هم متد Object.assign() فقط نوعی کپی «کم‌عمق» (shallow copy) از شی می‌سازند، در این رابطه بسیار مهم است.

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

در کدهای بالا کارهای زیر را انجام می‌شوند:

1. شیئی به نامobjectX ایجاد می‌کند.
2. سه ویژگی (name , age,gadgets ) را بهobjectXاختصاص می‌دهد.
3. به ویژگی gadgets شیئی به عنوان مقدار آن خواهد داد.
4. به مقدار شیء ویژگی gadgetsیک ویژگی brand می‌دهد.
5. به ویژگی brandآرایه‌ای به عنوان مقدار آن می‌دهد.
6. با استفاده از عملگر spread خصوصیات را در objectXدر objectY کپی می‌کند.
7. مقدار ویژگی name objectY را به Mary تغییر می‌دهد.
8. اولین مورد در مقدار آرایه ویژگی brandرا از apple به hp تغییر داد.

در قطعه کد بالا، مقدار آرایه نوعی شی عمیق تودرتو است. باید به این نکته توجه داشت که تغییر در مقدار ویژگی nameبرای  objectYباعث تغییر در مقدار ویژگی name برای objectXنخواهد شد، اما تغییر در شیء عمیق تودرتو objectXباعث تغییر مشابهی در شی عمیق تودرتو objectXخواهد شد.

پیمایش Object در جاوا اسکریپت

از حلقه «For...in» در جاوا اسکریپت برای پیمایش اشیا و انتخاب ویژگی‌های آن استفاده می‌شود. سینتکس حلقه For...in به صورت زیر است:

کلمه کلیدی key در سینتکس بالا نوعی پارامتر برای ویژگی‌ها به‌حساب می‌آید و می‌توان آن را با هر کلمه‌ای که انتخاب می‌شود به سادگی جایگزین کرد. برای این کار باید کلمه کلیدی شی را با نام شیئی که قرار است پیمایش یا تکرار روی آن انجام شود، مانند مثال زیر جایگزین کرد:

برای این هدف باید به علامت براکت در حلقه برای بدست آوردن مقادیر ویژگی توجه کرد. استفاده علامت نقطه به‌جای علامت براکت، «Undefined» بازمی‌گرداند.

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

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

در این مثال فرض بر این است که شیئی به نام myTable وجود دارد که دارای ویژگی‌های زیر است.

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

در مثال بالا متد myTable.whatIsMyColor است و باید تابعی بدون پارامتر درون آن نوشت. این تابع می‌تواند هر چیزی باشد و این تابع باید به کاربر کمک کند که با اشیا کارە کند. در داخل تابعی که قطعه کد بالا نوشته شده است، فراخوانی و با استفاده از کلمه کلیدی this.color ، متد به ویژگی‌های شی پیوند داده می‌شود. هم‌اکنون تماس بین آن‌ها برقرار و می‌توان myTable.whatIsMyColorرا به صورت زیر فراخوانی کرد.

می‌توان چندین بار متد myTable.whatIsMyColorرا فراخوانی کرد و این کار خودش نوعی مزایا به‌حساب می‌آید که کاربر می‌تواند در کار با Object در جاوا اسکریپت از آن بهره ببرد.

کلمه کلیدی This در جاوا اسکریپت

زمانی که تابعی به عنوان سازنده (با کلمه کلیدی نیو) مورد استفاده قرار می‌گیرد، کلمه کلیدی This در جاوا اسکریپت به شی جدید در حال ساخت محدود می‌شود و ارزش کلمه کلیدی This بر اساس نحوه اجرای کد تعیین خواهد شد. همچنین به صورت مشابه استفاده از کلمه کلیدی This در متدها به عنوان نوعی تابع شی در نظر گرفته خواهد شد.

استفاده از کلمه کلیدی This هنگام کار با اشیا بسیار منطقی است زیرا کلمه کلیدی This شیئی را بازمی‌گرداند که کاربر روی آن کار می‌کند. کلمه کلیدی This بسته به زمینه و نوع اجرا معنای متفاوت به خود می‌گیرد. برای مثال استفاده از آن در داخل سازنده، متد یا شی هرکدام معنی متفاوتی دارد.

متدها در داخل سازنده ها

سازنده‌ها روشی بسیار خوب برای تعریف متدها برای Object در جاوا اسکریپت هستند.

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

استفاده از سازنده برای اعلان Object جدید در جاوا اسکریپت

در مثال بالا متد this.whatIsMyColor نوشته شده است و برابر با تابعی بدون پارامتر قرار می‌گیرد. همچنین با استفاده از علامت براکت {} بدنه تابع نیز ایجاد شده است. در مثال بالا باید document.write فراخوانی شده و مقدار را در آن وارد کرد.

مقدار در اینجا برابر است با My color is و به دنبال آن کاراکتر $ و کروشه {} را مانند قطعه کد بالا باید نوشت. در داخل کروشه باز و بسته {} نیز باید this.color نوشته شود که این عبارت مقدار را برای شی می‌خواند. حال اگر document.writeفراخوانی شود پیغامی در سند «HTML» نشان می‌دهد.برای استفاده از سازنده جهت اعلان شی جدید برای مثال بالا، باید متغیری را با let myFirstTable اعلان کرد و سپس new Table(80, 80, 120, "blue") را فراخوانی کرد. مقادیر موجود در برائت‌ها شی هستند.

می‌توان از سازنده‌ها بارها و بارها استفاده کرد. حال می‌توان متغیر دوم را با نام let mySecondTable نیز اعلان کرد. برای این هدف باری دیگر جدول جدیدی فراخوانی می‌شود و باید مقادیر را درون آن نوشت. جدول زیر به‌صورت new Table(80, 100, 150, "red") است.
حال باید متد را برای هر دو شی فراخوانی کرد که برای شی اول به‌صورت myFirstTable.whatIsMyColor() و برای شی دوم به‌صورت mySecondTable.whatIsMyColor() خواهد بود. خروجی اجرای این قطعه کد در داخل مرورگر به‌صورت زیر است.

سؤالات متداول

در این بخش ٣ پرسش و پاسخ متداول در رابطه با Object ها در جاوا اسکریپت، جهت درک بهتر این موضوع مورد بررسی واقع خواهند شد.

آیا شی نوعی تابع در جاوا اسکریپت است؟

بله، در دنیای جاوا اسکریپت تابع به عنوان نوعی شی در نظر گرفته می‌شود.

مثالی از شی در جاوا اسکریپت چیست؟

شی جاوا اسکریپت موجودیتی است که حالت و رفتار (ویژگی و متد) دارد. همه‌چیز در جاوا اسکریپت یک شی است. به عنوان مثال: ماشین، خودکار، دوچرخه، صندلی، شیشه و غیره همگی شی هستند و در کل  جاوا اسکریپت زبانی مبتنی بر شی است.

آیا آرایه یک شی جاوا اسکریپت است؟

بله آرایه‌ها نوعی شی در جاوا اسکریپت محسوب می‌شوند. عملگر Typeof در جاوا اسکریپت Object را برای آرایه‌ها برمی‌گرداند.

سخن پایانی

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

در این مطلب آموزشی از مجله فرادرس در رابطه با Object های جاوا اسکریپت و رسالت آن‌ها توضیحاتی همراه با مثال ارائه شد. همچنین در رابطه با نحوه دسترسی به آن‌ها و ایجاد متدها و ویژگی‌ها برای آن‌ها به صورت کامل بحث شد.