جاوا اسکریپت نسخه جدید ES6 – تعریف توابع به صورت Arrow

جاوا اسکریپت نسخه جدید ES6 – تعریف توابع به صورت Arrow

 

تعریف توابع در JS با کلمه کلیدی function صورت می گیرد و توابع بی نام (anonymous) هم به همین صورت با این تفاوت که در تعریف توابع بی نام، نامی برا تابع اختصاص نمیدهیم و آن مستقیما pass یا اجرا می کنیم، اما این کار مشکلاتی دارد اولین مشکل که مشکل که مشکل کوچکی به شمار می آید طولانی شدن تعریف توابع Anonymous است و دومین مشکل که مشکل جدی تر است است محدوده this است.

ابتدا یاد بگیریم که چگونه یک Arrow Function بسازیم تا جلو تر به بیان مشکل محدوده this میپردازیم.

 

تعریف Arrow Function ها:

برای تعریف توابع arrow به صورت زیر عمل میکنیم. پرانتزی برای آرگومان های تابع و سپس به مساوی و فلش به بیان بدنه تابع می پردازیم:

 

نکته:  توجه کنید که توابع Arrow دارای constructor نیستند ینی آن ها را برای ساخت object ها نمیتوانید استفاده کنید.

دیدید که با ساخت یک instance از تابع myFunc خطا صادر میشود این به این خاطر است که Arrow Function ها سازنده یا constructor ندارد و فقط یک تابع هستند.

یک مثال از arrow function ها به صورت زیر است که یک arrow function را به یک تابع به عنوان آرگومان ارسال کردیم.

تابعی تعریف میکنیم که دو تابع را دریافت کرده و در شرایط مختلف هر یک را اجرا میکند اما ما وقتی از این تابعی که تعریف کردیم قصد استفاده داریم به جای pass کردن تابع خود با کلمه کلیدی function از arrow function ها استفاده کردیم:

 

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

 

اما این کوتاه شدن بحث اصلی توابع Arrow Function نیست  و کار اصلی Arrow Function ها Lexical This است و تصحیح محدوده اشاره this است شاید این توضیح کمی گنگ باشد برای درک بهتر به مثال زیر توجه کنید:

 

اگر کد بالا را اجرا کنید میبینید که به هنگام log کردن this به object جاری اشاره نمیکند و به موقعیتی اشاره میکند که اصولا به درد اینکه ما کدمان را توسعه دهیم نمیخورد. این همان مشکل ساز بودن محدوده this است.

اما راه حل هایی ابدایی وجود دارد که این مشکل را حل میکند اما استاندارد نیست برای مثال یک متغیر مثلا با نام this_ در آن Scope مورد نظر میسازیم و در جایی که نیاز داریم از this_ به جای this استفاده می کنیم همانند کد زیر:

 

اما در ES6 به جای این کار های غیر معمول فقط کافیست تابع را به صورت Arrow Fucntion استفاده کنیم همانند زیر:

 

خروجی اکنون صحیح است . محدوده this به object مورد نظر ما اشاره میکند.

اما نحوه کار Arrow Function برای Lexical This چیست؟ در اصل Arrow Function زمینه متصل تابع ارسال شده را به محیط اطراف خود تغییر میدهد و نه به صورت Nested.

در قسمت بعد با ویژگی های بیشتری که با نام های (Default + Rest + Spread) آشنا میشویم و کار میکنیم 🙂