تعریف توابع به صورت پیکان
تعریف تابع به صورت پیکان یا فلش از نسخه 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 |
| سپتامبر ۲۰۱۵ | ژوئیه ۲۰۱۵ | می ۲۰۱۳ | سپتامبر ۲۰۱۶ | مارس ۲۰۱۵ |
منابع آموزشی