تعریف توابع به صورت پیکان

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مرجع جاوا اسکریپت

تعریف تابع به صورت پیکان یا فلش از نسخه 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.gif Edge.gif Firefox.gif Safari.gif Opera.gif
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
سپتامبر ۲۰۱۵ ژوئیه ۲۰۱۵ می ۲۰۱۳ سپتامبر ۲۰۱۶ مارس ۲۰۱۵


منابع آموزشی