تفاوت Arrow فانکشن ها و توابع معمولی در جاوااسکریپت - بخش اول

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

اولین و معمولی ترین روش با استفاده از کلمه کلیدی function است که به دو صورت زیر تعریف می شود.

همانطور که در شکل فوق می بینیم به روش اول function declaration گفته می شود و به روش دوم function expression که به صورت کلی به این دو نوع regular function و در اینجا ما به آنها فانکشن های معمولی میگوییم.

روش دوم که از ES2015 شروع شده است، arrow فانکشن ها هستند:

اما تفاوت این دو روش چیست؟ مطبی است که در این گفتار به آن می پردازیم.

۱. مقدار this

۱.۱ در فانکشن های معمولی

در فانکشن های معمولی، مقدار this ( معروف به execution context) داینامیک است. و کانتکس داینامیک در اینجا به این معنی است که مقدار this به چگونگی فراخوانی فانکشن بستگی دارد.

در جاوا اسکریپت ۴ روش زیر جهت فراخوانی فانکشن وجود دارد.

• فراخوانی ساده
• فراخوانی از طریق متد
• فراخوانی غیر مستقیم
• فراخوانی از طریق constructor

در فراخوانی ساده مقدار this برابر global object (یا undefined وقتی که فانکش در حالت مد strict اجرا می شود) است

در فراخوانی از طریق متد، مقدار this برابر آبجکتی است که متد از آن فراخوانی شده است.

در فراخوانی غیر مستقیم با استفاده از

myFunc.call(thisVal, arg1, ..., argN)

یا

myFunc.apply(thisVal, [arg1, ..., argN])

مقدار this برابر آرگومان اول است

در فراخوانی از طریق constructor استفاده از کلمه کلیدی this برابر instance جدید ایجاد شده است.

۲.۱ در Arrow فانکشن ها

رفتار this در arrow فانکشن ها تفاوت قابل توجهی با فانکشن های معمولی دارد.

مقدار this در arrow فانکشن به چگونگی و مکان اجرای فانکشن ربطی ندارند و همیشه برابر با مقدار this در فانکشن بیرونی هستند به عبارت دیگر arrow فانکشن از لحاظ lexically آن را حل نموده اند و یا به عبارتی arrow فانکشن ها کانتکس اجرای (execution context) شخصی خود را ندارند.

همانطور که در مثال فوق می بینیم مقدار arrow فانکشن callback برابر با فانکشن بیرونی myMethod است

تا اینجا تفاوت this در فانکشن های معمولی و arrow فانکشن ها را توضیح دادیم در گفتار های بعدی لینک زیر سایر تفاوت های این دو نوع فانکشن را شرح خواهیم داد.