توابع شناور JavaScript

پیشنهاد دوره:

توابع پرچمدار در ES6 معرفی شدند.

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

زبان نشانه‌گذاری

آزمایش کنید

let myFunction = (a, b) => a * b;

hello = function() {
  بعد از استفاده از توابع پرچمدار:
}

آزمایش کنید

قبل از آن:

hello = () => {
  بعد از استفاده از توابع پرچمدار:
}

آزمایش کنید

return "Hello World!"; در واقع کوتاه‌تر شده است! اگر توابع تنها یک دستور داشته باشند و این دستور یک مقدار بازمی‌گرداند، می‌توان پارانتزها و return

کلمه کلیدی:

ارائه‌ی پیش‌فرض توابع پرچمدار:

آزمایش کنید

hello = () => "Hello World!";توضیح:

این فقط در صورتی که توابع تنها یک دستور داشته باشند معتبر است.

اگر پارامتری دارید، آن‌ها را به داخل پارانتز ارسال کنید:

توابع پرچمدار با پارامتر:

آزمایش کنید

hello = (val) => "Hello " + val;

در واقع، اگر تنها یک پارامتر وجود داشته باشد، می‌توانید پارانتز را نیز حذف کنید:

توابع پرچمدار بدون پارانتز:

آزمایش کنید

این hello = val => "Hello " + val;

چه کاری باید انجام داد؟ این در مقایسه با توابع معمولی، توابع پرچمدار برای

به طور خلاصه، استفاده از توابع پرچمدار بدون تغییرات زیادی در پردازش نیز متفاوت است. این به عنوان bind استفاده می‌شود.

در توابع معمولی، کلمه کلیدی این نشان‌دهنده объکتی است که تابع را فراخوانی کرده است، می‌تواند پنجره، مستند، دکمه یا هر چیز دیگری باشد.

برای توابع پرچمدار،این کلمه کلیدی همیشه نشان‌دهنده объکتی است که تابع پرچمدار را تعریف کرده است.

اجازه دهید دو مثال ببینیم تا تفاوت‌ها را درک کنیم.

این دو مثال هر دو دو بار تابع را فراخوانی کرده‌اند، اولین بار در زمان بارگذاری صفحه، دومین بار در زمان کلیک کاربر.

در مثال اول از توابع معمولی استفاده شده است، در مثال دوم از توابع پرچمدار استفاده شده است.

نتایج نشان می‌دهد که در مثال اول دو объکت متفاوت (window و button) بازمی‌گردد، در مثال دوم دو بار объکت window بازمی‌گردد، زیرا объکت window “مالک” توابع است.

مثال

برای توابع معمولی، کلمه کلیدی this نشان‌دهنده объکتی است که تابع را فراخوانی کرده است:

// توابع معمولی:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// فراخوانی این فونکشن توسط شیء window:
window.addEventListener("load", hello);
// فراخوانی این فونکشن توسط شیء button:
document.getElementById("btn").addEventListener("click", hello);

آزمایش کنید

مثال

از تابع‌های پرچمدار استفاده شده است، سپس این نشان‌دهنده مالکیت توابع:

// توابع پروازنده:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// فراخوانی این فونکشن توسط شیء window:
window.addEventListener("load", hello);
// فراخوانی این فونکشن توسط شیء button:
document.getElementById("btn").addEventListener("click", hello);

آزمایش کنید

هنگام استفاده از تابع، این تفاوت‌ها را به خاطر بسپارید. گاهی اوقات، رفتار معمولی توابع دقیقاً چیزی است که می‌خواهید، و اگر اینطور نیست، از توابع پروازنده استفاده کنید.

پشتیبانی مرورگر

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

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
سپتامبر 2015 جولای 2015 مай 2013 سپتامبر 2016 سپتامبر 2015