توابع پیکانی ES6 (ES6 Arrow Functions)
در این صفحه با توابع پیکانی ES6 آشنا می شوی. این توابع شکل کوتاه تر برای نوشتن تابع در جاوااسکریپت هستند. تصور کن مثل میانبرهای صفحه کلید هستند که همان کار قبلی را سریع تر انجام می دهند.
توابع پیکانی ES6 دقیقا چه هستند؟
تابع معمولی در جاوااسکریپت با کلمه function نوشته می شود. توابع پیکانی ES6 همان کار را انجام می دهند اما با شکل کوتاه تر. بنابراین کد تمیزتر می شود و خواندن آن راحت تر است.
یک تابع معمولی برای گفتن Hello World را ببین. این همان چیزی است که قبل از توابع پیکانی ES6 استفاده می شد.
hello = function() {
return "Hello World!";
};
نوشتن همان تابع با توابع پیکانی ES6
حالا همان تابع را با شکل پیکانی می نویسیم. علامت => را به جای کلمه function استفاده می کنیم. نتیجه دقیقا همان است اما کد کوتاه تر شده است.
hello = () => {
return "Hello World!";
};
اگر تابع فقط یک دستور داشته باشد و همان دستور مقدار برگرداند، می توانیم آکولاد و return را هم حذف کنیم. این کار توابع پیکانی ES6 را خیلی جمع وجور می کند.
hello = () => "Hello World!";
پارامترها در توابع پیکانی ES6
برای فرستادن ورودی به تابع، از پارامتر (Parameter) استفاده می کنیم. پارامتر یعنی متغیری که تابع هنگام صدا شدن دریافت می کند. در توابع پیکانی ES6 هم پارامترها داخل پرانتز نوشته می شوند.
hello = (val) => "Hello " + val;
اگر فقط یک پارامتر داشته باشیم، حتی می توانیم پرانتز را هم حذف کنیم. این هم یکی از کوتاه سازی های توابع پیکانی ES6 است.
hello = val => "Hello " + val;
رفتار this در توابع پیکانی ES6
کلیدواژه this در جاوااسکریپت کمی حساس است. this یعنی «این شیء فعلی». در تابع معمولی، this به چیزی که تابع را صدا زده بستگی دارد. ممکن است window باشد، دکمه باشد یا هر شیء دیگر.
اما در توابع پیکانی ES6، this به شیئی اشاره می کند که تابع داخل آن تعریف شده است. یعنی this به «سازنده» وابسته است، نه به «صدا زننده». این تفاوت در مثال های زیر واضح تر می شود.
this در تابع معمولی
در این مثال، کلاس Header یک متد changeColor دارد. این متد به صورت تابع معمولی نوشته شده است. یک بار با window و یک بار با دکمه صدا زده می شود.
class Header {
constructor() {
this.color = "Red";
}
// Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
};
}
const myheader = new Header();
// The window object calls the function:
window.addEventListener("load", myheader.changeColor);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
در این حالت this هر بار چیز متفاوتی است. یک بار window است چون صفحه صدا می زند. بار بعد دکمه است چون رویداد کلیک آن را صدا می زند.
this در توابع پیکانی ES6
حالا همان متد changeColor را به صورت تابع پیکانی ES6 می نویسیم. این بار this همیشه به شیء Header اشاره می کند. فرقی ندارد چه کسی تابع را صدا بزند.
class Header {
constructor() {
this.color = "Red";
}
// Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
};
}
const myheader = new Header();
// The window object calls the function:
window.addEventListener("load", myheader.changeColor);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
در این نسخه، this همیشه به myheader اشاره می کند. چه صفحه آن را صدا بزند، چه دکمه. این رفتار ثابت یکی از مهم ترین فرق های توابع پیکانی ES6 با توابع معمولی است.
نکته: گاهی دقیقا رفتار تابع معمولی را لازم داری. آن وقت همین تفاوت this می تواند برایت مفید باشد. اگر رفتار ثابت می خواهی، توابع پیکانی ES6 گزینه بهتری هستند.
چطور توابع پیکانی ES6 را تمرین کنیم؟
برای تمرین، قدم به قدم جلو برو تا موضوع خیلی راحت شود. کدهای همین صفحه و ابزار Run Example بهترین جا برای تمرین سریع هستند.
- یک تابع معمولی بنویس که یک متن ساده برگرداند.
- همان تابع را با توابع پیکانی ES6 بازنویسی کن.
- یک تابع پیکانی با پارامتر بنویس و نتیجه را در صفحه نشان بده.
- نسخه معمولی و نسخه پیکانی changeColor را در ابزار آزمایشی اجرا کن.
اگر نیاز داشتی از پایه شروع کنی، صفحه آشنایی با ES6 (ES6) را هم ببین. همچنین برای مرور ساختار کلاس ها می توانی دوباره به صفحه کلاس ها در ES6 (ES6 Classes) سر بزنی.
برای رجوع سریع به همین صفحه، یک بار دیگر روی لینک توابع پیکانی ES6 در فهرست داخلی سایت کلیک کن. این صفحه مرجع اصلی تو برای این مبحث خواهد بود.
جمع بندی سریع
- توابع پیکانی ES6 همان تابع هستند اما با سینتکس کوتاه تر.
- در توابع پیکانی ES6 می توانی پرانتز و return را گاهی حذف کنی.
- this در تابع معمولی به «صدا زننده» بستگی دارد.
- this در توابع پیکانی ES6 به جایی که تعریف شده وابسته است.
- برای رفتار ثابت this از توابع پیکانی ES6 استفاده کن.