عملکردهای پیکان نسبت به جایگزین معمولی آنها تمیزتر و ساده‌تر هستند، اما نباید عجله کنید که از آنها بدون اطلاع از نحوه عملکردشان استفاده کنید.
سینتکس تابع پیکان با انتشار ECMAScript 2015 که با نام ES6 نیز شناخته می شود وارد شد. امروزه توابع فلش به ویژگی مورد علاقه بسیاری از برنامه نویسان جاوا اسکریپت تبدیل شده اند. این عشق به توابع فلش به دلیل نحو مختصر و رفتار مستقیم کلمه کلیدی “this” است.
اما عملکردهای فلش دارای معایبی هستند. در مورد تفاوت های کلیدی بین عملکردهای پیکان و عملکردهای معمولی بیاموزید و دریابید که چرا در بیشتر موارد بهتر است به عملکردهای معمولی پایبند باشید.
1. قبل از استفاده باید یک تابع فلش را تعریف کنید
شما نمی توانید یک تابع فلش را بالا ببرید. قوانین بالا بردن پیش‌فرض جاوا اسکریپت به شما این امکان را می‌دهد که یک تابع را قبل از تعریف آن فراخوانی کنید، اما در مورد توابع پیکانی اینطور نیست. اگر یک فایل جاوا اسکریپت با توابع دارید، به این معنی است که تمام کدهای مهم در پایین فایل پایین خواهند بود.
به عنوان مثال کد جاوا اسکریپت زیر را در نظر بگیرید:
const doubleNumbers = (numbers) {
numbers.map(n => n * 2)
}
const halveNumbers = (numbers) {
numbers.map(n => n / 2)
}
const sumNumbers = (numbers) {
numbers.reduce((sum, n) => {
return sum + n;
}, 0)
}
const numbers = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers(numbers)
console.log(halveNumbers(doubled))
console.log(sumNumbers(numbers))
در بلوک کد بالا، کد مهم در پایین قرار دارد. توابع کمکی همگی قبل از نقطه اجرا تعریف شده اند. ایجاد توابع جاوا اسکریپت در بالای فایل ممکن است ناخوشایند باشد زیرا برای دیدن کد واقعی که کار را انجام می دهد باید به پایین بروید.
اگر توابع کمکی را به پایین و کد واقعی را به بالا منتقل کنید، یک خطای مرجع دریافت خواهید کرد. زمان اجرا تابع را به عنوان یک متغیر در نظر می گیرد. بنابراین، ابتدا باید قبل از دسترسی یا فراخوانی آن را تعریف کنید. اما اگر تمام توابع پیکان را به توابع معمولی (با کلمه کلیدی تابع) تبدیل کنید، کد شما به خوبی کار می کند. در همان زمان، کد مهم در بالای صفحه باقی می ماند که می توانید آن را پیدا کنید.
این یکی از بزرگترین مشکلات استفاده از توابع فلش است. آنها هیچ رفتار میزبانی از خود نشان نمی دهند. به عبارت دیگر، شما باید آنها را قبل از مکان واقعی که از آنها استفاده می کنید، تعریف کنید. از طرف دیگر، می توانید عملکردهای معمولی را بالا ببرید.
2. عملکردهای پیکان ممکن است برای برخی افراد گیج کننده باشد
یکی دیگر از دلایل استفاده از توابع منظم به جای توابع فلش، خوانایی است. خواندن توابع معمولی آسان تر است زیرا به صراحت از کلمه کلیدی تابع استفاده می کنند. این کلمه کلیدی مشخص می کند که کد مورد نظر یک تابع است.
از طرف دیگر، توابع فلش را به متغیرها اختصاص می دهید. به عنوان یک تازه کار، این ممکن است شما را گیج کند و فکر کنید که کد یک متغیر است نه یک تابع.
دو تابع زیر را مقایسه کنید:
const halveNumbers = (numbers) => {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
در نگاه اول به راحتی می توانید متوجه شوید که دومین تکه کد یک تابع است. نحو مشخص می کند که کد یک تابع است. با این حال، اولین مورد مبهم است – ممکن است به راحتی نتوانید تشخیص دهید که یک متغیر است یا یک تابع.
3. شما نمی توانید از توابع پیکان به عنوان روش استفاده کنید
وقتی از یک تابع پیکان استفاده می کنید، این کلمه کلیدی با هر چیزی که خارج از چیزی است که ما در آن هستیم مطابقت دارد. در بیشتر موارد، شی پنجره است.
شی زیر را در نظر بگیرید:
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: () => {
console.log(`${this.firstName}` `${this.lastName}` )
}
}
person.printName()
اگر کد را اجرا کنید، متوجه خواهید شد که مرورگر برای نام و نام خانوادگی به صورت تعریف نشده چاپ می کند. از آنجایی که ما از یک تابع فلش استفاده می کنیم، این کلمه کلیدی با شی پنجره مطابقت دارد. همچنین، هیچ ویژگی firstName یا lastName در آنجا تعریف نشده است.
برای حل این مشکل، باید به جای آن از یک تابع معمولی استفاده کنید:
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: function() {
console.log(`${this.firstName}` `${this.lastName}` )
}
}
person.printName()
این به خوبی کار می کند زیرا به شخص مورد نظر اشاره دارد. اگر قرار است این نوع برنامه نویسی شی گرا را زیاد انجام دهید، باید مطمئن شوید که از توابع منظم استفاده می کنید. توابع پیکان کار نمی کنند.
زمان استفاده از توابع پیکان
از توابع پیکان عمدتاً در مکان هایی استفاده کنید که به یک تابع ناشناس نیاز دارید. نمونه ای از چنین سناریویی، برخورد با یک تابع تماس است. بهتر است هنگام نوشتن یک کال بک از تابع فلش استفاده کنید زیرا نحو بسیار ساده تر از نوشتن یک تابع کامل است.
این دو را مقایسه کنید و تصمیم بگیرید که کدام یک ساده تر است:
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
function halveNumbers(numbers) {
return numbers.map(function(n) {
return n / 2
})
}
هر دو حالت یک تابع callback را به متد map() ارسال می کنند. اما اولین فراخوان یک تابع فلش است در حالی که دومی یک تابع کامل است. می‌توانید ببینید که چگونه تابع اول خط‌های کمتری کد نسبت به تابع دوم می‌گیرد: سه در مقابل پنج.
زمان دیگر استفاده از توابع فلش زمانی است که بخواهید با یک نحو خاص “this” سروکار داشته باشید. شیء “this” بسته به اینکه از توابع معمولی یا توابع پیکانی برای چیزهای خاص استفاده می کنید تغییر می کند.
بلوک کد زیر دو شنونده رویداد “کلیک” را روی شی سند ثبت می کند. نمونه اول از یک تابع منظم به عنوان پاسخ تماس استفاده می کند، در حالی که نمونه دوم از یک تابع فلش استفاده می کند. در داخل هر دو فراخوان، کد شیء اجرا (این) و هدف رویداد را ثبت می‌کند:
document.addEventListener("click", function(e) {
console.log("FUNCTION", this, e.target)
})
document.addEventListener("click", (e) => {
console.log("ARROW", this, e.target)
})
اگر بخواهید این اسکریپت را اجرا کنید، متوجه خواهید شد که “این” مرجع برای هر دو متفاوت است. برای تابع منظم، این ویژگی به سند ارجاع می دهد که همان ویژگی e.target است. اما برای تابع arrow، این به شی پنجره اشاره می کند.
هنگامی که از یک تابع معمولی به عنوان پاسخ به تماس استفاده می‌کنید، به عنصری اشاره می‌کند که در آن رویداد را راه‌اندازی می‌کنیم. اما وقتی از یک تابع فلش استفاده می‌کنید، این کلمه کلیدی به صورت پیش‌فرض روی شی پنجره قرار می‌گیرد.
درباره توابع پیکان در مقابل توابع معمولی بیشتر بدانید
چندین تفاوت ظریف دیگر بین توابع معمولی و عملکردهای پیکان وجود دارد. تسلط بر هر دو نوع تابع برای تسلط بر جاوا اسکریپت اساسی است. یاد بگیرید که چه زمانی از یکی استفاده کنید و چه زمانی از دیگری استفاده کنید. سپس پیامدهای استفاده از یک تابع معمولی یا یک تابع پیکان در جاوا اسکریپت خود را درک خواهید کرد.