٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش عملکرد پیکان جاوا اسکریپت

توابع پیکان در ES6 معرفی شدند. توابع Arrow به ما اجازه می دهد تا نحو عملکرد کوتاهتری بنویسیم: قبل از: hello = function() { return "Hello World!"; } با عملکرد Arrow: hello = () => { return "Hello World!"; }…

محمد یوسفی

23 جولای 2021

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

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

قبل از:

hello = function() {
  return "Hello World!";
}

با عملکرد Arrow:

hello = () => {
  return "Hello World!";
}

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

توابع پیکان مقدار را به طور پیش فرض برمی گردانند:

hello = () => "Hello World!";

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

اگر پارامترهایی داشته باشید ، آنها را درون پرانتزها رد می کنید:

عملکرد پیکان با پارامترها:

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

در واقع ، اگر فقط یک پارامتر دارید ، می توانید از پرانتز نیز بگذرید:

عملکرد پیکان بدون پرانتز:

hello = val => "Hello " + val;

چطور this؟

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

به طور خلاصه ، با توابع پیکان هیچ صحافی وجود ندارد this.

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

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

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

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

مثال اول از یک تابع منظم استفاده می کند ، و مثال دوم از تابع arrow استفاده می کند.

نتیجه نشان می دهد که مثال اول دو شی مختلف را برمی گرداند (پنجره و دکمه) ، و مثال دوم شی پنجره را دو بار برمی گرداند ، زیرا شی پنجره “صاحب” عملکرد است.

مثال

با یک تابع منظم thisنمایانگر شیئی است که تابع را فراخوانی می کند:

// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

مثال

با یک تابع arrow this، صاحب عملکرد را نشان می دهد:

// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

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


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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها