Использование стрелочных функций в JavaScript
Стрелочная функция в JavaScript — это более лаконичная альтернатива традиционной функции. Синтаксис позволяет быстро создавать встроенные анонимные функции.
Стрелочные функции были добавлены в ES6 в 2015 году. Теперь они поддерживаются всеми основными браузерами. Вы можете использовать их со старыми браузерами, такими как Internet Explorer, через транспилятор, такой как Babel.
Создание стрелочных функций
Основное преимущество стрелочных функций заключается в том, насколько лаконичным они делают ваш код.
Вот традиционная функция:
function square(x) {
return (x * x);
}Вот тот же код, переписанный как стрелочная функция:
const square = x => (x * x);
Они называются «стрелочными функциями» из-за похожего на стрелку синтаксиса «=>».
Стрелочные функции особенно полезны при работе с обратными вызовами.
Вот традиционная версия:
function getNonEmptyStrings(arr) {
return arr.filter(function (i) {
return (i.length > 0);
});
}А вот внутренняя функция в виде стрелочной функции:
function getNonEmptyStrings(arr) {
return arr.filter(i => (i.length > 0));
}Стрелочные функции намного короче своих традиционных аналогов. Вы можете опустить префикс function. Они включают чистые однострочные операторы и имеют неявный оператор return.
Обработка аргументов
Стрелочные функции принимают несколько различных форм аргументов:
const noArgs = () => alert("I've no arguments");
const oneArg = arg => alert(`My arg is ${arg}`);
const multipleArgs = (arg1, arg2) => alert(`Args: ${arg1} ${arg2}`);При использовании одного аргумента скобки не нужны. При наличии нескольких аргументов используйте круглые скобки и запятые в том же стиле, что и классическое объявление функции. Стрелочные функции, которые не принимают аргументов, требуют пустой пары круглых скобок, чтобы их синтаксис был допустимым.
Работа с литералами объектов
Вы можете возвращать литералы объектов из встроенных стрелочных функций, но они должны быть заключены в круглые скобки. Это требование парсера.
const func = () => ({foo: "bar"});Вы можете деструктурировать литерал объекта на аргументы, используя ту же форму, заключенную в круглые скобки:
const func = ({foo}) => foo;
// func({foo: "bar"}) returns "bar"Отсутствие скобок приводит к синтаксической ошибке в обоих случаях.
Возвращаемые значения
Все наши примеры до сих пор были однострочными функциями с неявным оператором return.
Вы можете написать стрелочные функции, которые охватывают несколько строк:
function getNonEmptyStrings(arr) {
return arr.filter(i => {
const trimmed = i.trim();
const replaced = trimmed.replace(/[^A-Za-z]/g, "");
return (replaced.length > 0);
});
}При написании многострочной стрелочной функции заключите ее основной блок в квадратные скобки так же, как и в случае традиционной функции. Нельзя использовать неявный возврат; вы должны вернуться к оператору return.
Лексическое связывание
Помимо синтаксиса, наличие лексической привязки является одним из самых больших отличий между стрелочными функциями и классическими функциональными выражениями.
Традиционная функция имеет ссылку this на себя. Стрелочные функции всегда анонимны. this привязан к тому же значению, что и this в блоке, определяющем функцию стрелки.
class Example {
constructor() {
this.demo = "foobar";
}
classic(arr) {
return arr.filter(function (a) {
return (a === this.demo);
});
}
arrow(arr) {
return arr.filter(a => (a === this.demo));
}
}
const ex = new Example();
// no matches
ex.classic(["foobar"]);
// matches
ex.arrow(["foobar"]);Способность стрелочных функций использовать this родительской области означает, что вам не нужно использовать bind() при их использовании в классах. В сочетании с более кратким синтаксисом это делает стрелочные функции идеальной формой для написания обратных вызовов. Они лучше всего подходят для одноразовых сценариев, где внешний контекст важнее, чем собственная идентичность функции.
Вследствие лексической привязки стрелочные функции не следует использовать с функциями call, apply и bind. Эти функции используются для выполнения функции в определенной области. Они не относятся к стрелочным функциям, так как this всегда будет установлен в область действия, в которой определено выражение.
Характеристики
У стрелочных функций есть еще несколько отличий от явно определенных выражений function.
У стрелочных функций нет конструктора, поэтому вы не можете создавать их экземпляры с помощью ключевого слова new. У них тоже нет прототипа — свойство prototype будет undefined.
В отличие от обычных функций, вы не можете использовать локальную переменную arguments. Это будет undefined. Вы должны получить доступ к значениям аргументов непосредственно по имени.
Использование стрелочной функции в качестве генератора не поддерживается. Попытка использовать ключевое слово yield в теле стрелочной функции вызовет ошибку.
Последнее, на что следует обратить внимание, — это порядок синтаксического анализа. Стрелочные функции получают уникальную обработку в условных выражениях, поэтому обратите внимание на вывод в следующих сценариях:
const value = false;
// Traditional function; all OK
let result = (value || function () {});
// Arrow function - throws a `SyntaxError`
let result = (value || () => null);
// Arrow function; all OK
let result = (value || (() => null));При создании стрелочной функции в условном выражении заключайте ее в круглые скобки, чтобы обеспечить ее правильное вычисление. Некоторые правила приоритета операторов переопределяются, как показано во втором примере.
Заключение
Использование стрелочных функций делает ваш код более лаконичным и уменьшает количество шаблонов. Их атрибуты, включая анонимность и лексическую привязку, значительно упрощают такие сценарии, как обратные вызовы. В то же время те же самые атрибуты означают, что они не являются простой заменой каждой традиционной функции.
Помимо своих ограничений, некоторые разработчики JavaScript считают, что стрелочные функции могут сделать код менее читаемым и сложным в обслуживании. Полное отсутствие ключевых слов, таких как function и return, позволяет не заметить их присутствие при беглом просмотре кода. Синтаксис более непрозрачен для новых разработчиков, которые могут не до конца осознавать его особенности.
Поэтому неплохо подумать, как вы будете использовать стрелочные функции в своей кодовой базе. Часто это означает запись обратных вызовов в виде стрелок с использованием альтернативного синтаксиса для ключевых функций верхнего уровня.