رهام رفیعی تهرانی
رهام رفیعی تهرانی
خواندن ۱ دقیقه·۳ سال پیش

تفاوت های arrow function و regular function در جاوااسکریپت، بخش دوم

امروز میخواهیم چهار تفاوت باقیمانده بین arrow function و regular function را بررسی کنیم. در بخش اول گفتم که به چه مشکلی خوردم و مهمترین تفاوت را مرور کردیم.

تفاوت اول مربوط به متغیر this میشد. تفاوت دوم مربوط به تابع سازنده میشود و کلمه کلیدی new. از روی تابع معمولی میشود یک آبجکت جدید ساخت:

اما از روی تابعی که به صورت arrow function تعریف شده، امکان ساخت آبجکت جدید نیست:


تفاوت سوم مربوط به متغیر arguments هست؛ متغیری که لیستی از ورودی های تابع را درون تابع در اختیار قرار میدهد. این متغیر فقط درون تابع معمولی تعریف میشود:


در حالی که داخل arrow function این متغیر ست نمی شود و اگر صدایش بزنیم، به متغیر arguments در scope مربوط به صدازننده (caller) این تابع اشاره میکند. مثلا در مثال زیر با اینکه تابع myArrowFunction را با ورودی های 'c' و 'd' صدا زدیم، ولی متغیر arguments که درون تابع arrow function صدا زده شده، مربوط به myRegularFunction هست:


البته امکان دسترسی به پارامترهای ورودی arrow function به صورت زیر ممکن است:

اما به هر حال متغیر arguments داخل arrow function تعریف نمی شود.


تفاوت چهارم، بحث implicit return هست. این امکان منحصر به arrow function هست. کد زیر را در نظر بگیرید:

این تابع عملا معادل تابع زیر رفتار میکند، بدون اینکه از کلمه کلیدی return استفاده شده باشد:

در واقع عبارتی که جلوی <= هست، اگر داخل {} نباشد، برابر با عبارتی در نظر گرفته میشود که برمیگردد. این ویژگی در توابع معمولی وجود ندارد و باید مقدار برگشتی را با کلمه کلیدی return مشخص کنیم.


تفاوت پنجم زمانی است که تابع را داخل کلاس تعریف میکنیم و میخواهیم آن را به صورت callback یا در event listener استفاده کنیم. در این حالت scope تابع معمولی، scope صدازننده است و نه آبجکت کلاس:

کلاس زیر را در نظر بگیرید که یک instance از روی آن ساخته ایم:

در حالت عادی، وقتی batman.logName را صدا بزنیم مشکلی نیست. ولی اگر مثلا در setTimeout این تابع را صدا بزنیم، به مشکل برمیخوریم:

در این شرایط تابع مستقل از آبجکت کلاس خود صدا زده میشود و heroName مربوط به کلاس Hero وجود ندارد. برای حل این مشکل، معمولا از روش bind کردن تابع به آبجکت استفاده میکنند:

در این حالت اعلام میکنیم که تابع در scope مربوط به آبجکت batman صدا زده شود.

اما در arrow function اینطور نیست. scope تابع همواره scope کلاسی است که تابع در آن تعریف شده است و نیاز به bind ندارد.

تابع logName همواره به scope کلاس Hero اشاره میکند.


به صورت خلاصه مهم است به بدانیم در چه شرایطی از arrow function استفاده کنیم و در چه شرایطی استفاده نکنیم. arrow function ها بهترین گزینه برای callback هستند. در توابعی مثل map، reduce و forEach هم که به نوعی از callback استفاده میکنند عالی هستند. اما به عنوان event listener، در literal object ها، به عنوان تابع prototype و زمانی که به متغیر arguments نیاز داریم، گزینه مناسبی نیستند.

:)






جاوااسکریپتjavascriptarrow functionmongoosemongodb
برنامه نویسی یک شغل نیست، یک هنره.
شاید از این پست‌ها خوشتان بیاید