آموزش جاوا اسکریپت مبتدی : اصول اولیه شیء جاوا اسکریپت
در این مقاله، به سینتکس اساسی شیءگرایی جاوا اسکریپت نگاهی خواهیم انداخت و برخی از ویژگیهای جاوا اسکریپت را که قبلاً در این دوره دیدهایم، دوباره بررسی خواهیم کرد و این واقعیت را تکرار میکنیم که بسیاری از ویژگیهایی که قبلاً با آنها سر و کار داشتهاید، شیء هستند.
یک شیء مجموعهای از دادهها و/یا عملکردهای مرتبط است. اینها معمولاً شامل چندین متغیر و تابع هستند (که وقتی درون اشیاء هستند، ویژگیها و متدها نامیده میشوند). بیایید با یک مثال، شکل ظاهری آنها را درک کنیم.
برای شروع، یک کپی محلی از فایل خود ایجاد کنید. این فایل حاوی مقدار بسیار کمی کد است - یک عنصر برای نوشتن کد منبع ما. ما از این به عنوان پایهای برای بررسی سینتکس اولیه شیء استفاده خواهیم کرد. هنگام کار با این مثال، باید کنسول جاوا اسکریپت ابزارهای توسعهدهنده خود را باز و آماده تایپ برخی دستورات داشته باشید.
حالا کنسول جاوا اسکریپت مرورگر خود را باز کنید، person را در آن وارد کنید و Enter/Return را فشار دهید. باید نتیجهای مشابه یکی از خطوط زیر دریافت کنید:
تبریک میگویم، شما اولین شیء خود را ایجاد کردید. کار تمام شد! اما این یک شیء خالی است، بنابراین نمیتوانیم کار زیادی با آن انجام دهیم. بیایید شیء جاوا اسکریپت را در فایل خود بهروزرسانی کنیم تا به شکل زیر درآید:
پس از ذخیره و رفرش، سعی کنید برخی از موارد زیر را در کنسول جاوا اسکریپت در ابزار توسعه مرورگر خود وارد کنید:
اکنون شما مقداری داده و قابلیت درون شیء خود دارید و میتوانید با یک سینتکس ساده و زیبا به آنها دسترسی داشته باشید!
خب، اینجا چه اتفاقی میافتد؟ خب، یک شیء از چندین عضو تشکیل شده است که هر کدام یک نام (مثلاً نام و سن در بالا) و یک مقدار (مثلاً و 32) دارند. هر جفت نام/مقدار باید با یک کاما از هم جدا شوند و نام و مقدار در هر مورد با یک دونقطه از هم جدا میشوند. سینتکس همیشه از این الگو پیروی میکند:
مقدار یک عضو شیء میتواند تقریباً هر چیزی باشد - در شیء person ما یک عدد، یک آرایه و دو تابع داریم. دو مورد اول، اقلام داده هستند و به عنوان ویژگیهای شیء شناخته میشوند. دو مورد آخر، توابعی هستند که به شیء اجازه میدهند کاری با آن دادهها انجام دهد و به عنوان متدهای شیء شناخته میشوند.
وقتی اعضای شیء توابع باشند، سینتکس سادهتری وجود دارد. به جای میتوانیم را بنویسیم. مانند این:
از این به بعد، از این سینتکس کوتاهتر استفاده خواهیم کرد.
به چنین شیئی، شیء تحتاللفظی گفته میشود - ما به معنای واقعی کلمه، محتویات شیء را هنگام ایجاد آن نوشتهایم. این در مقایسه با اشیاء نمونهسازی شده از کلاسها که بعداً به آنها خواهیم پرداخت، متفاوت است.
ایجاد یک شیء با استفاده از شیء تحتاللفظی زمانی که میخواهید مجموعهای از اقلام داده ساختاریافته و مرتبط را به نحوی منتقل کنید، بسیار رایج است، به عنوان مثال ارسال درخواست به سرور برای قرار دادن در یک پایگاه داده. ارسال یک شیء واحد بسیار کارآمدتر از ارسال چندین مورد به صورت جداگانه است و کار با آن آسانتر از یک آرایه است، زمانی که میخواهید اقلام جداگانه را با نام شناسایی کنید.
در بالا، شما با استفاده از نماد نقطه به ویژگیها و متدهای شیء دسترسی پیدا کردید. نام شیء (person) به عنوان فضای نام عمل میکند - برای دسترسی به هر چیزی درون شیء، ابتدا باید آن را وارد کنید. سپس یک نقطه مینویسید، سپس آیتمی را که میخواهید به آن دسترسی پیدا کنید - این میتواند نام یک ویژگی ساده، یک آیتم از یک ویژگی آرایه یا فراخوانی یکی از متدهای شیء باشد، به عنوان مثال:
اشیاء به عنوان ویژگیهای اشیاء دیگر
یک ویژگی شیء میتواند خودش یک شیء باشد. برای مثال، سعی کنید نام member را از
برای دسترسی به این موارد، فقط کافی است مرحله اضافی را با یک نقطه دیگر به انتها وصل کنید. این موارد را در کنسول JS امتحان کنید:
اگر این کار را انجام دهید، باید کد متد خود را نیز بررسی کرده و هر نمونهای از موارد زیر را تغییر دهید
در غیر این صورت، متدهای شما دیگر کارساز نخواهند بود.
استفاده از براکت یک روش جایگزین برای دسترسی به ویژگیهای شیء ارائه میدهد. به جای استفاده از نقطه، مانند این:
به جای آن میتوانید از کروشه استفاده کنید:
این بسیار شبیه به نحوه دسترسی به آیتمهای یک آرایه است و اساساً یکسان است - به جای استفاده از شماره شاخص برای انتخاب یک آیتم، از نام مرتبط با مقدار هر عضو استفاده میکنید. جای تعجب نیست که گاهی اوقات به اشیا آرایههای انجمنی گفته میشود - آنها رشتهها را به مقادیر نگاشت میکنند، همانطور که آرایهها اعداد را به مقادیر نگاشت میکنند.
علامتگذاری نقطهای معمولاً نسبت به علامتگذاری براکت ترجیح داده میشود زیرا مختصرتر و خواناتر است. با این حال، مواردی وجود دارد که باید از براکت استفاده کنید. به عنوان مثال، اگر نام یک ویژگی شیء در یک متغیر نگهداری شود، نمیتوانید از علامتگذاری نقطهای برای دسترسی به مقدار استفاده کنید، اما میتوانید با استفاده از علامتگذاری براکت به مقدار دسترسی پیدا کنید.
در مثال زیر، تابع میتواند از برای بازیابی مقدار ویژگی نامگذاری شده در propertyName استفاده کند.
تاکنون فقط به بازیابی (یا دریافت) اعضای شیء پرداختهایم - همچنین میتوانید با اعلام عضوی که میخواهید تنظیم کنید (با استفاده از نمادگذاری نقطه یا براکت)، مقدار اعضای شیء را تنظیم (بهروزرسانی) کنید، مانند این:
سعی کنید خطوط بالا را وارد کنید و سپس دوباره اعضا را بررسی کنید تا ببینید چگونه تغییر کردهاند، مانند این:
تنظیم اعضا فقط به بهروزرسانی مقادیر ویژگیها و متدهای موجود محدود نمیشود؛ شما میتوانید اعضای کاملاً جدیدی نیز ایجاد کنید. این موارد را در کنسول JS امتحان کنید:
اکنون میتوانید اعضای جدید خود را آزمایش کنید:
یکی از جنبههای مفید نمادگذاری براکت این است که میتوان از آن نه تنها برای تنظیم پویای مقادیر اعضا، بلکه برای تنظیم نام اعضا نیز استفاده کرد. فرض کنید میخواهیم کاربران بتوانند با تایپ نام و مقدار عضو در دو ورودی متنی، انواع مقادیر سفارشی را در دادههای افراد خود ذخیره کنند. میتوانیم این مقادیر را به این صورت دریافت کنیم:
سپس میتوانیم این نام و مقدار عضو جدید را به صورت زیر به شیء person اضافه کنیم:
برای آزمایش این، سعی کنید خطوط زیر را به کد خود، درست زیر آکولاد بستهی شیء person اضافه کنید:
حالا سعی کنید ذخیره و رفرش کنید و موارد زیر را در ورودی متن خود وارد کنید:
افزودن یک ویژگی به یک شیء با استفاده از روش بالا با نماد نقطه امکانپذیر نیست، زیرا این نماد فقط میتواند نام یک عضو حقیقی را بپذیرد، نه مقدار متغیری که به یک نام اشاره میکند.
ممکن است متوجه نکتهای کمی عجیب در روشهای ما شده باشید. برای مثال به این مورد نگاه کنید:
احتمالاً برایتان سوال پیش آمده که «» چیست. کلمه کلیدی معمولاً به شیء فعلی که کد در آن اجرا میشود اشاره دارد. در زمینه یک متد شیء، به شیءای اشاره دارد که متد روی آن فراخوانی شده است.
بیایید منظورمان را با یک جفت شیء ساده شده از person نشان دهیم:
در این حالت، تابع خروجی "سلام! من کریس هستم" و تابع خروجی "سلام! من دیپتی هستم" را میدهد. این اتفاق به این دلیل رخ میدهد که وقتی متد فراخوانی میشود، this به شیءای که متد روی آن فراخوانی میشود اشاره دارد، که اجازه میدهد تعریف متد یکسانی برای چندین شیء کار کند.
این موضوع زمانی که شما در حال نوشتن لیترالهای شیء به صورت دستی هستید، چندان مفید نیست، زیرا استفاده از نام شیء (person1 و person2) منجر به نتیجه دقیقاً یکسانی میشود، اما زمانی که شروع به استفاده از سازندهها برای ایجاد بیش از یک شیء از یک تعریف شیء واحد میکنیم، ضروری خواهد بود و این موضوع بخش بعدی است.
استفاده از لیترالهای شیء زمانی خوب است که فقط نیاز به ایجاد یک شیء داشته باشید، اما اگر مجبور به ایجاد بیش از یک شیء باشید، همانطور که در بخش قبل گفته شد، آنها واقعاً ناکافی هستند. ما باید برای هر شیء که ایجاد میکنیم، کد یکسانی بنویسیم و اگر بخواهیم برخی از ویژگیهای شیء را تغییر دهیم - مانند اضافه کردن ویژگی ارتفاع - باید به خاطر داشته باشیم که هر شیء را بهروزرسانی کنیم.
ما به روشی نیاز داریم که بتوانیم «شکل» یک شیء - مجموعه متدها و ویژگیهایی که میتواند داشته باشد - را تعریف کنیم و سپس هر تعداد شیء که دوست داریم ایجاد کنیم، فقط مقادیر ویژگیهایی را که متفاوت هستند بهروزرسانی کنیم.
نسخه اول این فقط یک تابع است:
این تابع هر بار که آن را فراخوانی میکنیم، یک شیء جدید ایجاد و برمیگرداند. این شیء دو عضو خواهد داشت:
- یک نام ویژگی
- یک متد .
توجه داشته باشید که یک پارامتر name برای تنظیم مقدار ویژگی name میگیرد، اما مقدار متد برای همه اشیاء ایجاد شده با استفاده از این تابع یکسان خواهد بود. این یک الگوی بسیار رایج برای ایجاد اشیاء است.
اکنون میتوانیم با استفاده مجدد از تعریف، هر تعداد شیء که دوست داریم ایجاد کنیم:
این روش خوب کار میکند اما کمی طولانی است: ما باید یک شیء خالی ایجاد کنیم، آن را مقداردهی اولیه کنیم و آن را برگردانیم. راه بهتر استفاده از یک سازنده است. یک سازنده فقط تابعی است که با استفاده از کلمه کلیدی فراخوانی میشود. وقتی یک سازنده را فراخوانی میکنید، این کار را انجام میدهد:
- یک شیء جدید ایجاد میکند
- این را به شیء جدید متصل میکند، بنابراین میتوانید در کد سازنده خود به این اشاره کنید
- کد را در سازنده اجرا کنید
- شیء جدید را برگردانید.
سازندهها، طبق قرارداد، با یک حرف بزرگ شروع میشوند و بر اساس نوع شیءای که ایجاد میکنند نامگذاری میشوند. بنابراین میتوانیم مثال خود را به این صورت بازنویسی کنیم:
برای فراخوانی به عنوان سازنده، از استفاده میکنیم:
تمام این مدت داشتید از اشیاء استفاده میکردید
همانطور که این مثالها را مرور میکردید، احتمالاً فکر میکردید که نماد نقطهای که استفاده کردهاید بسیار آشناست. دلیلش این است که در طول دوره از آن استفاده کردهاید! هر بار که ما با مثالی کار میکردیم که از یک API مرورگر داخلی یا شیء جاوا اسکریپت استفاده میکرد، از اشیاء استفاده میکردیم، زیرا چنین ویژگیهایی دقیقاً با استفاده از همان نوع ساختارهای شیء که در اینجا بررسی کردهایم، ساخته میشوند، البته ساختارهایی پیچیدهتر از نمونههای سفارشی اولیه خودمان.
بنابراین وقتی از متدهای رشتهای مانند:
شما از یک متد موجود در یک شیء String استفاده میکردید. هر بار که یک رشته در کد خود ایجاد میکنید، آن رشته به طور خودکار به عنوان نمونهای از String ایجاد میشود و بنابراین چندین متد و ویژگی رایج روی آن موجود است.
هنگامی که با استفاده از خطوطی مانند این به مدل شیء سند دسترسی پیدا کردید:
شما از متدهای موجود در یک شیء Document استفاده میکردید. برای هر صفحه وب بارگذاری شده، یک نمونه از Document به نام document ایجاد میشود که نشان دهنده ساختار کل صفحه، محتوا و سایر ویژگیها مانند URL آن است. باز هم، این بدان معناست که چندین متد و ویژگی مشترک در آن موجود است.
همین امر در مورد تقریباً هر شیء یا API داخلی دیگری که استفاده کردهاید - Array، Math و غیره - نیز صادق است.
توجه داشته باشید که اشیاء و APIهای داخلی همیشه به طور خودکار نمونههای شیء ایجاد نمیکنند. به عنوان مثال، API اعلانها - که به مرورگرهای مدرن اجازه میدهد اعلانهای سیستم را ارسال کنند - از شما میخواهد که برای هر اعلانی که میخواهید ارسال کنید، یک نمونه شیء جدید با استفاده از سازنده ایجاد کنید. سعی کنید موارد زیر را در کنسول جاوا اسکریپت خود وارد کنید:
