عبارات تابع

عبارات تابع توابعی هستند که در جایی ایجاد می شوند که یک عبارت انتظار می رود. شما اغلب با عبارات تابع به عنوان مقادیر اختصاص داده شده به یک متغیر مواجه خواهید شد. اگرچه یک اعلان تابع همیشه به یک نام نیاز دارد، می‌توانید از عبارات تابع برای ایجاد توابع ناشناس با حذف شناسه و دنبال کردن کلمه کلیدی function با یک جفت پرانتز حاوی پارامترهای اختیاری استفاده کنید:

const myVariable = function() { };

سپس می توانید آن عبارات تابع را با استفاده از شناسه متغیر فراخوانی کنید :

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

همچنین می‌توانید از عبارات تابع برای ایجاد توابع نام‌گذاری شده با استفاده از نحوی شبیه به اعلان‌های تابع استفاده کنید:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

با این حال، برخلاف اعلان‌های تابع، یک عبارت تابع نام‌گذاری‌شده را می‌توان تنها با نام تابع در خود تابع در دسترس قرار داد:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

نام های مرتبط با عبارات تابع در درجه اول برای اشکال زدایی مفید هستند. یک عبارت تابع نام‌گذاری شده نیز می‌تواند خود را به صورت بازگشتی فراخوانی کند، اگرچه این یک مورد استفاده رایج در توسعه مدرن نیست:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

عبارات تابع پیکان

عبارات تابع پیکان (که اغلب به آنها "توابع فلش" یا به ندرت "توابع لامبدا" گفته می شود) در ES6 معرفی شدند تا یک نحو مختصر برای ایجاد عبارات تابع ناشناس با برخی رفتارهای منحصر به فرد ارائه دهند.

شما می توانید هرجا که یک عبارت انتظار می رود، یک تابع پیکان ایجاد کنید، برای مثال، به عنوان مقداری که به یک متغیر اختصاص داده شده است. در رایج‌ترین شکل آن، یک تابع پیکان از یک جفت پرانتز منطبق که حاوی صفر یا چند پارامتر است، یک فلش از یک علامت مساوی و کاراکتر بزرگتر از ( => ) و یک جفت پرانتز مجعد منطبق تشکیل شده است. حاوی بدنه تابع:

const myFunction = () => {};

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

const myFunction = myParameter => {};

هنگامی که می خواهید بدنه تابع مقدار یک عبارت واحد را برگرداند ، نه بدنه تابع در پرانتزهای فرفری محصور می شود و نه کلمه کلیدی return لازم نیست:

const myFunction = () => 2 + 2

myFunction()
> 4

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

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

فراخوانی توابع فلش

توابع پیکان آرگومان ها را به همان روشی که انواع دیگر توابع متصل می کنند، متصل نمی کنند. یک شیء arguments در بدنه یک تابع فلش مقدار خود را از نزدیکترین محیط محصور واژگانی تابع فلش به ارث می برد:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

در این مثال، یک تابع خارجی که با آرگومان false فراخوانی می‌شود، یک تابع پیکان داخلی را با آرگومان true فراخوانی می‌کند. از آنجایی که شیء arguments داخل تابع فلش به اتصال در تابع خارجی حل می‌شود، تابع داخلی false تابع خارجی را ثبت می‌کند.

اگر شیء arguments برای ارث بردن از زمینه والد وجود نداشته باشد، شیء arguments تابع فلش تعریف نشده است و تلاش برای دسترسی به آن باعث خطا می شود:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

عبارات تابع فوری فراخوانی شده (IIFE)

یک عبارت تابع فراخوانی فوری (IIFE)، که گاهی اوقات "عملکرد ناشناس خود اجرا کننده" نیز نامیده می شود، یک عبارت تابعی است که بلافاصله پس از تعریف فراخوانی می شود. یک IIFE از یک عبارت تابعی استفاده می کند که با محصور کردن تابع در یک عملگر گروه بندی ایجاد شده است. سپس یک جفت پرانتز منطبق دوم، تابع را فراخوانی می کند، یا بلافاصله پس از تعریف خود تابع یا بلافاصله پس از عملگر گروه بندی. اگر از یک تابع استاندارد استفاده می کنید، هیچ تفاوت عملی بین این دو رویکرد وجود ندارد:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

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

با این حال، زمانی که IIFE شما یک تابع فلش باشد، تفاوت وجود دارد. در این مورد، پرانتزهای مورد استفاده برای فراخوانی تابع باید خارج از عملگرهای گروه بندی باشند، زیرا یک تابع فلش به خودی خود یک عبارت نیست، اما باید در زمینه ای ایجاد شود که یک عبارت مورد انتظار است. تلاش برای فراخوانی تابع پیکان از داخل محدوده عملگرهای گروه‌بندی به معنای فراخوانی یک تابع پیکانی است که هنوز در متن یک عبارت ایجاد نشده است:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

از آنجایی که عملگرهای گروه‌بندی انتظار یک عبارت را دارند، تابع فلش درون آن‌ها تعریف می‌شود و به پرانتزهایی که به دنبال آن‌ها می‌آیند، اجازه می‌دهند عبارت گروه‌بندی شده را فراخوانی کنند:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

برنامه‌های قدیمی، IIFE‌هایی که اغلب برای مدیریت دامنه استفاده می‌شوند، به‌ویژه برای جلوگیری از آلوده کردن دامنه جهانی با متغیرهای محدوده عملکرد و اعلان‌های عملکرد . قبل از معرفی محدوده بلوک در ES6، قرار دادن کل اسکریپت در یک IIFE برای جلوگیری از آلودگی تصادفی دامنه جهانی، معمول بود.

درک خود را بررسی کنید

آیا می توانید یک عبارت تابع نامگذاری شده را با نام خارج از تابع فراخوانی کنید؟

خیر

بله