اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب:
سه دقیقه
توابع Arrow در خیلی از زبان‌های سطح بالا مثل #C و Java8 وجود دارد. حال این امکان به جاوااسکریپت نیز اضافه شده‌است که syntax ایی مشابه lambda expression در سی شارپ دارد. در این مقاله سعی بر معرفی تابع arrow در جاوا اسکریپت داریم و خواهیم گفت که به منظور خلاصه کردن سینتکس و اشتراک گذاری this نحوی با قلمروی والد خود بکار می‌روند. اجازه دهید تا به هر کدام از آنها به صورت جزیی‌تر بپردازیم.
یک سینتکس جدید برای توابع
Arrow Functions راه میانبری را برای نوشتن توابع بی نام (anonymous functions) در جاوا اسکریپت ارایه می‌کنند و در خیلی از قسمت‌ها با هم یکی هستند ولی با کد نویسی کمتر. به این مثال که در ES5 احتمالا دیده‌اید توجه کنید:
var myFunction = function(arg) {
return arg.toUpperCase();
}; حالا آن را می‌توان به سادگی در ES6 نوشت:
var myFunction = (arg) => arg.toUpperCase();
کجا از Arrow Functions استفاده کنیم؟
به طور معمول Arrow Functionsها برای پاس دادن یک تابع بی نام به تابعی دیگر استفاده می‌شوند. برای مثال می‌توان به توابع filter و map اشاره کرد. به مثال زیر توجه کنید.
var digits = [1,2,3,4,5,6]; var even = digits.filter( x => x%2 === 0); // فیلتر بر اساس یک شرط var evenSquares = even.map( x => x*x ); console.log(even, evenSquares); //[2,4,6] [4,16,36]
نکات مهمی که باید به آنها توجه شود:
- توابع arrow زمانیکه داخل بدنه‌ی آنها بیش از یک عبارت قرار گیرد لازم است که به طور صریح از کلید واژه return استفاده شود.
- برای برگشت یک شیء خالی باید از سینتکس زیر استفاده کنیم:
const emptyObject = () => {};
emptyObject(); // ? در این حالت یک باگ به حساب می‌آید
//باید دقت شود که اکولاد‌ها را در بین پرانتز‌ها قرار دهیم تا تابع به درستی کار کند
const emptyObject = () => ({});
emptyObject(); // {} - تمامی ویژگی‌هایی را که برای پارمترها گفته شد، می‌توان برای توابع arrow بکار برد.
function () { return arguments[0]; }
(...args) => args[0] توابع arrow سازنده نیستند. به این معنا که نمی توان عملکرد new را روی آنها بکار برد. به عبارتی دیگر، نوشتن کد زیر به شما خطا خواهد داد.
let NotGood = () => {};
let wontWork = new NotGood(); this لکسیکال (lexical) یا نحوی
یکی از مشکلات موجود در ES5 مساله this در توابع است. به طور پیش فرض this در یک تابع به محیط فعلی آن تابع اشاره می‌کند. ولی زمانیکه می‌خواهید از this در توابعی که به تابعی دیگر داده شده‌اند استفاده کنیم دو حالت داریم. اگر از strict مد جاوا اسکریپت استفاده کنیم ("use strict;") آنگاه this مقدار undefined خواهد داشت و در غیر این صورت this به محیط global اشاره می‌کند که این یک مشکل در ES5 است! به مثال زیر توجه کنید:
$('.current-time').each(function () {
setInterval(function () {
$(this).text(Date.now());
}, 1000);
}); که برنامه نویسان از راه حل زیر استفاده می‌کنند.
$('.current-time').each(function () {
var self = this;
setInterval(function () {
$(self).text(Date.now());
}, 1000);
}); یا به این صورت:
$('.current-time').each(function () {
setInterval(function () {
$(this).text(Date.now());
}.bind(this), 1000);
}); ولی حال در ES6 به راحتی می‌توان این مشکل را با خود تابع arrow حل کرد؛ به صورت زیر:
$('.current-time').each(function () {
setInterval(() => $(this).text(Date.now()), 1000);
}); و این مورد به دلیل این است که this در توابع arrow یک this نحوی است و به همان ترتیبی که تابع در کد قرار می‌گیرد آن this به محیط تابع فعلی اشاره می‌کند و این تغییر مهمی است که خیلی از دردسر‌ها را کم می‌کند.