تابع پیکانی (Arrow Function) در JavaScript چگونه به ما کمک می کند؟
let myFunction = (a, b) => a * b;hello = function() {
return "سلام!";
}hello = () => {
return "سلام!";
}بنابراین کد ما کوتاه تر می شود!
اگر تابع فقط یک عبارت داشته باشد و دستور یک مقدار را برگرداند، می توانیم براکت ها و کلمه کلیدی return را حذف کنیم:
hello = () => "سلام!";نکته: این کد تنها در صورتی کار می کند که تابع فقط یک عبارت داشته باشد.
اگر پارامترهایی داشته باشیم ، آنها را داخل پرانتز قرار می دهیم:
hello = (val) => "سلام" + val;در واقع، اگر فقط یک پارامتر داشته باشیم، می توانیم پرانتز را نیز رد کنیم:
hello = val => "سلام" + val;درمورد کلمه کلیدی (this) در JavaScript
مدیریت (this) نیز در توابع پیکانی در مقایسه با توابع معمولی، متفاوت است.
به طور خلاصه، با توابع پیکانی هیچ اتصالی برای (this) وجود ندارد.
در توابع منظم، کلمه کلیدی (this)، شئ ای را نشان می دهد که تابع نامیده می شود، که می تواند پنجره، سند، یک دکمه یا ... باشد.
با توابع پیکانی، کلمه کلیدی (this) همیشه شئ ای را نشان می دهد که تابع پیکانی را تعریف می کند.
بیایید نگاهی به دو مثال بیندازیم تا تفاوت را درک کنیم:
هر دو مثال یک متد را دو بار فراخوانی می کنند، ابتدا زمانی که صفحه بارگذاری می شود و یک بار دیگر زمانی که کاربر روی یک دکمه کلیک می کند.
- مثال اول از یک تابع منظم استفاده می کند،
- اما مثال دوم از یک تابع پیکانی استفاده می کند.
نتیجه نشان می دهد که مثال اول، دو شی مختلف (پنجره و دکمه) را برمی گرداند و مثال دوم، شئ پنجره را دو بار برمی گرداند، زیرا شئ پنجره مالک تابع است.
// Regular Function:
سلام= function() {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", سلام);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", سلام);// Arrow Function:
سلام= () => {
document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", سلام);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", سلام);نکته: این تفاوت ها را هنگام کار با توابع به خاطر بسپارید. گاهی اوقات رفتار توابع منظم همان چیزی است که شما می خواهید، اگر نه، از توابع پیکانی استفاده کنید.
خلاصه درس
- در این درس با تابع پیکانی (Arrow Function) در JavaScript آشنا شدیم.
- همچنین به کاربرد های کلمه کلیدی (this) پی بردیم.
