آشنایی کامل با Hoisting در Javascript - قسمت آخر - Hoisting مربوط به کلاسها



visibility  
mode_comment   ۰

در جلسه قبل قواعد Hoisting مربوط به توابع رو توضیح دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم قواعد Hoisting مربوط به Class یا کلاسها در Javascript رو به شما آموزش بدیم و نکات مربوط به Hoisting رو به پایان برسونیم.

همونطور که میدونین در ES5 خیلی بر روی برنامه نویسی شئ گرا تمرکز نشده بود و ما برای اینکه در ES5 بصورت شئ گرا برنامه بنویسیم، باید موارد سختی رو یاد میگرفتیم و از function constructor ها استفاده می کردیم. اما با اومدن ES6 این ایراد همانند خیلی از ایرادهای دیگه برطرف شد و کلاسها به Javascript اضافه شدند. هدف این جلسه این نیست که به شما نحوه کار با کلاسها رو آموزش بده، اما برای اینکه بهتر مطلب رو بفهمید یک مثال میزنم. اگر بخوایم یک کلاس رو در ES5 تعریف کنیم و با اون کار کنیم، بصورت زیر عمل میکنیم:

میبینید که فهمیدن کد بالا در ابتدا سخت و دشوار هست و کلمات کلیدی مثل prototype و constructor زیاد استفاده شده است. اگر بخوایم تقریبا همچنین کاری رو در ES6 انجام بدیم، کد بصورت زیر میشه:

میبینید که در اینجا از Class استفاده شده و کدنویسی اون شبیه به زبانهای معروف دیگه شده و بهتر میتونیم اون رو بفهمیم. همونطور که قبلا هم گفتیم، در آینده ای نزدیک ES6 و ... رو به شما آموزش میدیم. خب حالا بریم سراغ بحث خودمون که Hoisting در مورد کلاسها هست.

کلاسها نیز مثل توابع در دو دسته زیر، طبقه بندی میشن:

  • class declaration
  • class expression

بررسی class declaration

این نوع از کلاسها نیز به بالا Hoist میشن ولی باید اینو در نظر بگیرید که مقدار uninitialised برای اون قرار داده میشه و در ظاهر مثل این میمونه که اصلا Hoisting صورت نگرفته است. پس باید در ابتدا کلاس مورد نظر رو تعریف کنیم و بعد از اون میتونیم از اون استفاده کنیم. کد زیر رو در نظر بگیرید:

همونطور که میبینید در خط 6 کلاس با نام Hobbit رو تعریف کردیم و دو ویژگی height و weight رو برای اون قرار دادیم. در خط 1 سعی کردیم که به این کلاس دسترسی داشته باشیم و با استفاده از new یک نمونه جدید از اون بسازیم. اگر در مرورگر این کد رو اجرا کنیم، خروجی بصورت زیر میشه:

شاید این موضوع مقداری شما رو گیج کنه و با خودتون بگید که این کلاس اصلا Hoist نشده باشد. ولی اگر این کد رو درون ابزارهای linter مانند JSHint قرار بدیم، مشکل کار رو به ما بیان میکنن.

همونطور که میبینید گفته قبل از اینکه کلاس مورد نظر رو تعریف کنید، از اون استفاده کردید. پس زمانی که از class declaration استفاده میکنید، اول اونا رو تعریف کنید و بعد اونا رو مورد استفاده قرار بدین. مشکل کد بالا بصورت زیر حل میشه:

خروجی در مرورگر:

میبینید که شئ مورد نظر در Console چاپ میشه.

بررسی class expression

در این نوع کلاسها، متغیر بصورت undefined به بالا Hoist میشه و تعریف کلاس سر جاش باقی میمونه. اگر قبل از تعریف این نوع کلاسها، از اونا استفاده کنیم، یک ارور به ما نشون داده میشه و بهمون میگه که این متغیر constructor نیست و نمیتونیم از روی اون یک شئ جدید رو به وجود بیاریم. کد زیر رو ببینید:

میبینید که در خط 6 یک کلاس بی نام یا Anonymous رو به متغیر Polygon نسبت دادیم. در خط یک از این کلاس استفاده شده و اگر مرورگر رو باز کنیم، ارور زیر نمایش داده میشه:

اگر برای کلاس بی نام کد بالا، یک نام هم قرار بدیم، باز هم با ارور مواجه خواهیم شد. نحوه استفاده صحیح بصورت زیر هست:

با اینکار خروجی بصورت زیر خواهد شد:

امیدوارم با مطالعه این 6 مطلب دید بهتری نسبت به Hoisting پیدا کرده باشید و بهتر کدهاتون رو درک کنید.

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.