تعریف توابع به صورت پیکان
تعریف تابع به صورت پیکان یا فلش از نسخه ES6 آغاز شد. [۱]
این صورت از تعریف تابع، به ما کمک می‌کند که شیوه نوشتار تعریف یک تابع را کوتاه‌تر کنیم:
قبل‌تر:
1 hello = function() {
2 return "Hello World!";
3 }
با تعریف به صورت پیکان یا فلش:
1 hello = () => {
2 return "Hello World!";
3 }
شیوه نوشتار تابع کوتاه‌تر شد! اگه تابع فقط یک عبارت دارد و آن عبارت یک مقدار را برمی‌گرداند، شما می‌توانید براکت‌ها یعنی {} و کلمه کلیدی return را پاک کنید:
تعریف تابع به صورت پیکان یا فلش با مقدار بازگشتی پیش فرض
hello = () => "Hello World!";
اگر تابع شما پارامتر ورودی دارد، شما آنها را درون پرانتزها پاس می‌دهید:
تعریف تابع به صورت فلش با پارامتر یا آرگومان های ورودی
hello = (val) => "Hello " + val;
در حقیقت، اگر شما فقط یک پارامتر داشته باشید، شما می‌توانید پرانتزها راحذف کنید:
تعریف تابع به صورت پیکان یا فلش بدون پرانتزها
hello = val => "Hello " + val;
کلمه کلیدی this در این نوع تابع ها
مدیریت دستور this در این نوع توابع در مقایسه با توابع عادی متفاوت است.
به صورت کوتاه، در این نوع توابع کلمه به جایی متصل نمی‌شود و به آن اشاره نمی‌کند.
در توابع عادی، کلمه کلیدی this به شی ای که تابع را فراخوانی کرده‌است اشاره می‌کند که می‌تواند پنجره یا Window، سند یا document یک دکمه یا button یا هر چیز دیگری باشد.
با این نوع از تعریف تابع، کلمه کلیدی this همیشه به شیءای اشاره می‌کند که تابع را تعریف کرده‌است.
بزارید نگاهی به دو مثال بیندازیم تا تفاوت بین این دو را درک کنیم.
هر دو مثال یک متد را دو بار فراخوانی می‌کنند، اول زمانی که صفحه بارگذاری می‌شود و بار دیگر زمانی که کاربر روی یک دکمه کلیک می‌کند.
مثال اول از حالت عادی تعریف تابع استفاده می‌کند و مثال دوم از تعریف به صورت پیکان یا فلش.
نتیجه به این صورت است که مثال اول دو شی متفاوت را برمی‌گرداند (شی پنجره یا Window و دکمه)، و مثال دوم شی پنجره یا Window را دو بار برمی‌گرداند، به این خاطر که شی پنجره یا Window "صاحب" تابع است.
مثال
با تعریف ساده تابع، کلمه کلیدی this به شی اشاره می‌کند که تابع را فراخوانی کرده‌است:
1 //Regular Function:
2 hello = function() {
3 document.getElementById("demo").innerHTML += this;
4 }
5
6 //The window object calls the function:
7 window.addEventListener("load", hello);
8
9 //A button object calls the function:
10 document.getElementById("btn").addEventListener("click", hello);
مثال
با تعریف تابع به صورت پیکان یا فلش، کلمه کلیدی this به صاحب تابع اشاره می‌کند.
1 //Arrow Function:
2 hello = () => {
3 document.getElementById("demo").innerHTML += this;
4 }
5
6 //The window object calls the function:
7 window.addEventListener("load", hello);
8
9 //A button object calls the function:
10 document.getElementById("btn").addEventListener("click", hello);
این تفاوت‌ها را هنگامی که می‌خواهید با توابع کار کنید به یاد بسپارید. گاهی اوقات شیوه رفتار توابع‌هایی که به صورت عادی تعریف می‌شوند چیزیست که شما می‌خواهید و در غیراینصورت می‌توانید از شیوه تعریف به صورت پیکان یا فلش استفاده کنید.
سازگاری با مرورگرها
 |
 |
 |
 |
|
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| سپتامبر ۲۰۱۵ | ژوئیه ۲۰۱۵ | می ۲۰۱۳ | سپتامبر ۲۰۱۶ | مارس ۲۰۱۵ |
منابع آموزشی