در جاوا اسکریپت دو روش اصلی برای نوشتن توابع وجود دارد. شما می توانید توابع را با استفاده از دستور تابع معمولی ایجاد کنید. یا می توانید از دستور تابع فلش استفاده کنید.

در این مقاله نحوه استفاده از هر دو گزینه را یاد خواهید گرفت. همچنین با تفاوت‌های این دو و زمان مناسب استفاده از هر یک از آنها آشنا خواهید شد.

فهرست مطالب

نحو تابع منظم در مقابل نحو تابع پیکان

نحوه دسترسی به آرگومان های ارسال شده به توابع

پارامترهای نامگذاری شده تکراری

عملکرد بالابر

نحوه مدیریت "این" Binding در توابع

نحوه استفاده از توابع به عنوان سازنده

پس کدام یک را باید استفاده کنید؟

نحو تابع منظم در مقابل نحو تابع پیکان

برای درک تفاوت بین این دو گزینه، اجازه دهید با نگاهی به نحو آنها شروع کنیم.

نحو تابع منظم

روش معمولی برای اعلام توابع در جاوا اسکریپت استفاده از کلمه کلیدی function است. به عنوان مثال:

 function sayHello(name) { return 'Hello ' + name }

برای برگرداندن یک مقدار از یک تابع معمولی، باید به صراحت از کلمه کلیدی return استفاده کنید. در غیر این صورت تابع undefined برمی گردد.

نحو تابع پیکان

توابع پیکان با ECMAScript 6 (ES6) معرفی شدند. آنها روش دقیق تری برای تعریف توابع در جاوا اسکریپت به شما می دهند.

با استفاده از همان تابع sayHello از مثال قبلی، بیایید ببینیم که چگونه آن را با دستور تابع فلش ایجاد کنیم.

 const sayHello = (name) => { return 'Hello ' + name }

برخلاف توابع معمولی، اگر فقط یک عبارت مانند مثال بالا وجود داشته باشد، نیازی به استفاده از بازگشت صریح ندارید. شما می توانید تابع را روی یک خط بنویسید.

 const sayHello = (name) => 'Hello ' + name

توجه داشته باشید که چگونه بریس های فرفری نیز حذف می شوند تا به طور ضمنی نتیجه عبارت را برگردانند. حتی اگر فقط یک آرگومان وجود داشته باشد، می توانید پرانتز را نیز حذف کنید. مثال زیر را ببینید:

 const sayHello = name => 'Hello ' + name

name تنها آرگومانی است که تابع می گیرد. و این بدان معنی است که شما می توانید پرانتز را از آرگومان حذف کنید و همچنان خوب کار می کند.

نحوه دسترسی به آرگومان های ارسال شده به توابع

جاوا اسکریپت راهی برای دسترسی به همه آرگومان های ارسال شده به یک تابع فراهم می کند. اما نحوه دسترسی به این آرگومان ها به نوع تابعی که با آن کار می کنید بستگی دارد.

نحوه دسترسی به آرگومان ها با توابع منظم

با استفاده از شیء arguments می توانید به تمام آرگومان های ارسال شده به یک تابع معمولی دسترسی داشته باشید. شیء arguments یک شی آرایه مانند است که تمام آرگومان های ارسال شده به تابع را در خود نگه می دارد.

مثال:

 function logNumbers(num1, num2) { console.log(arguments) } logNumbers(8, 24)

همانطور که از نتیجه log می بینید، شیء arguments شامل دو عدد است که به عنوان آرگومان به تابع logNumbers ارسال می شود.

نحوه دسترسی به آرگومان ها با توابع جهت دار

شیء arguments در توابع پیکانی موجود نیست. اگر سعی کنید در توابع جهت دار به آن دسترسی پیدا کنید، جاوا اسکریپت یک خطای مرجع ایجاد می کند.

 const logNumbers = (num1, num2) => { console.log(arguments) } logNumbers(8, 24) // Uncaught ReferenceError: arguments is not defined

برای دسترسی به آرگومان های ارسال شده به یک تابع پیکان، می توانید از دستور پارامتر rest ( ... ) استفاده کنید.

مثال:

 const logNumbers = (...args) => { console.log(args) } logNumbers(8, 24)

با استفاده از دستور پارامتر بقیه ( ... )، به تمام آرگومان های ارسال شده به تابع logNumbers دسترسی خواهید داشت.

پارامترهای نامگذاری شده تکراری

تفاوت دیگر بین توابع معمولی و توابع پیکانی، نحوه مدیریت آنها با موارد تکراری در پارامترهای نامگذاری شده است.

پارامترهای نامگذاری شده را در توابع معمولی کپی کنید

وقتی یک تابع معمولی دارای نام های تکراری در پارامترها باشد، آخرین پارامتر با نام تکراری اولویت دارد. بیایید یک مثال را ببینیم:

 function exampleFunction(a, b, a) { console.log(a, b) } exampleFunction("first", "second", "third")

در مثال بالا، آرگومان third مقدار آرگومان first را لغو می کند زیرا آخرین پارامتر تکراری، اولویت است.

اما در حالت دقیق، استفاده از یک پارامتر تکراری با نام منجر به خطای نحوی می شود.

 "use strict" function exampleFunction(a, b, a) { console.log(a, b) } exampleFunction("first", "second", "third")

پارامترهای نامگذاری شده را در توابع پیکان تکرار کنید

توابع پیکان اجازه نمی دهد که نام پارامتر یکسان بیش از یک بار در فهرست پارامترها استفاده شود. انجام این کار منجر به یک خطای نحوی می شود.

مثال:

 const exampleFunction = (a, b, a) => { console.log(a, b) } exampleFunction("first", "second", "third")

عملکرد بالابر

Hoisting در جاوا اسکریپت رفتاری است که در آن متغیرها و توابع در طول کامپایل، قبل از اجرای کد، به بالای محدوده حاوی خود منتقل می شوند.

میزبانی در توابع منظم

عملکردهای منظم به بالا بالا رفته است. و حتی قبل از اعلام شدن می توانید به آنها دسترسی داشته باشید و با آنها تماس بگیرید.

 regularFunction() function regularFunction() { console.log("This is a regular function.") }

مورد بالا نمونه ای از فراخوانی یک تابع منظم قبل از اعلام آن است. و به دلیل بالا بردن عملکرد بدون پرتاب هیچ خطایی به خوبی کار می کند.

بالا بردن در توابع فلش

از سوی دیگر، توابع فلش قبل از اینکه مقداردهی اولیه شوند قابل دسترسی نیستند.

 arrowFunction() const arrowFunction = () => { console.log("This is an arrow function.") }

بر خلاف توابع معمولی، تلاش برای فراخوانی یک تابع پیکان قبل از اعلام، منجر به خطای مرجع می شود، همانطور که از خروجی بالا می بینید.

چگونه this اتصال را در توابع مدیریت کنیم

توابع منظم this زمینه خاص خود را دارند. و این بسته به نحوه فراخوانی یا اجرای تابع به صورت پویا تعیین می شود.

از سوی دیگر، توابع پیکان، این زمینه خاص خود را ندارند. در عوض، آنها this مقدار را از بافت واژگانی اطراف که تابع فلش در آن ایجاد شده است، می گیرند.

در زیر دو سناریو مختلف با استفاده از توابع معمولی و عملکردهای پیکانی ارائه شده است. خواهید دید که چگونه this زمینه تعیین می شود.

1. تنظیم this مقدار در طول یک فراخوانی تابع ساده

برای توابع معمولی، یک فراخوانی تابع ساده، this مقدار را روی شی window تنظیم می کند (یا اگر از "حالت سخت" استفاده می کنید، به undefined :

 function myRegularFunction() { console.log(this) } myRegularFunction()

 "use strict" function myFunction() { console.log(this) } myFunction() // udefined

با توابع پیکان، یک فراخوانی تابع ساده، this مقدار را در زمینه اطراف تنظیم می کند، چه از حالت سخت استفاده کنید یا نه. در مثال زیر، زمینه اطراف شیء پنجره جهانی است.

 const myArrowFunction = () => { console.log(this); }; myArrowFunction()

2. هنگام فراخوانی یا فراخوانی یک متد بر روی یک شی

هنگامی که متدی را فراخوانی می کنید که مقدار آن یک تابع منظم است، this مقدار به شیئی که متد بر روی آن فراخوانی می شود تنظیم می شود. اما زمانی که مقدار متد یک تابع پیکان باشد، this مقدار روی شیء پنجره جهانی تنظیم می شود.

 const myObject = { regularExample: function() { console.log("REGULAR: ", this) }, arrowExample: () => { console.log("ARROW: ", this) } } myObject.regularExample() myObject.arrowExample()

در حالی که متدی با تابع معمولی، شی را در کنسول ثبت می‌کند، روشی که تابع فلش دارد، شیء پنجره سراسری را ثبت می‌کند.

نحوه استفاده از توابع به عنوان سازنده

برای توابع معمولی، می توانید یک نمونه جدید با استفاده از کلمه کلیدی new ایجاد کنید. و این مقدار this را به نمونه جدیدی که ایجاد کرده اید تنظیم می کند.

برای توابع پیکان، نمی توانید از آنها به عنوان سازنده استفاده کنید. این به این دلیل است که مقدار this در توابع پیکان از نظر لغوی دارای محدوده واژگانی است - یعنی توسط زمینه اجرای اطراف تعیین می شود. این رفتار آنها را برای استفاده به عنوان سازنده مناسب نمی کند.

در اینجا یک مثال است:

 function RegularFuncBird(name, color) { this.name = name this.species = color console.log(this) } const ArrowFuncBird = (name, color) => { this.name = name this.color = color console.log(this) } new RegularFuncBird("Parrot", "blue") new ArrowFuncBird("Parrot", "blue")

سازنده RegularFuncBird با کلمه کلیدی new به خوبی کار می کند، اما ArrowFuncBird منجر به یک خطای نوع می شود.

پس کدام یک را باید استفاده کنید؟

هیچ پاسخ مستقیمی برای این وجود ندارد. اینکه آیا از یک تابع معمولی یا تابع فلش استفاده می کنید بستگی به مورد استفاده خاص دارد.

توصیه می شود در هر یک از موارد زیر از عملکرد معمولی استفاده کنید:

زمانی که باید از سازنده با کلمه کلیدی new استفاده کنید

هنگامی که شما نیاز به this اتصال به صورت پویا دارید

زمانی که می خواهید از شیء arguments استفاده کنید

و می توانید از توابع جهت دار در هر یک از موارد زیر استفاده کنید:

زمانی که شما یک نحو مختصرتر برای تابع می خواهید

زمانی که شما نیاز به حفظ دامنه واژگانی this دارید

برای توابع غیر روش (در بیشتر موارد)

همانطور که از این مقاله آموختید، هر دو روش معتبری برای تعریف توابع در جاوا اسکریپت هستند. به یاد داشته باشید که انتخاب بین آنها همیشه یک موضوع ترجیحی شخصی نیست. بلکه به نوع رفتاری که از عملکرد انتظار دارید بستگی دارد.

با تشکر برای خواندن و کد نویسی خوشحال!

خبرکاو