В этой статье вы узнаете о функциях стрелок, синтаксисе, параметрах, скобках и фигурных скобках, а также о том, когда их можно опустить. Вы также узнаете о неявном и явном возврате, немедленно вызванных функциях стрелки и основных различиях между функциями и функциями стрелки.
Содержание статьи
Введение
Функции стрелок были одной из наиболее заметных функций JavaScript, которые были добавлены в спецификации ES6. Они также были одной из самых обсуждаемых функций в ES6, наряду с классами. Итак, давайте посмотрим, что такое функции стрелок, как они работают и как их использовать.
Синтаксис функций стрелок
Наиболее заметной характеристикой функции стрелки является «жирная стрелка» ( => ). Также благодаря этой «жирной стрелке» функции стрелок получили свое название, а также прозвище «толстые стрелки». Эта «жирная стрелка» стоит между круглыми скобками для параметров, которые запускают функцию стрелки, и тела функции с некоторым кодом для выполнения, который завершает функцию стрелки.
// Синтаксис функции стрелки
let myArrowFunc = () => // краткое тело функции с некоторым кодом
// Или
let myArrowFunc = () => {/ * тело функции блока с некоторым кодом * /}
// Вызов myArrowFunc
myArrowFunc ()
Если вы сравните синтаксис функций стрелок с функциями, вы увидите, что синтаксис этих двух очень похож. Именно по этой причине функции стрелок считаются альтернативой выражению функций.
// Функция стрелки
const myArrowFunc = () => {/ * тело функции с некоторым кодом * /}
// выражение функции
const myArrowFunc = function () {}
Тем не менее, не позволяйте этому сходству одурачить вас. Хотя функции со стрелками могут выглядеть аналогично функциям, есть некоторые существенные и очень важные различия. Мы скоро поговорим обо всех этих различиях.
Параметры и (необязательно) круглые скобки
Функции стрелок обычно начинаются с круглых скобок. Однако это не совсем необходимо. Эти круглые скобки являются необязательными, и вы можете опустить их при одном конкретном условии. Единственное, что имеет значение, — это если конкретная функция стрелки принимает какой-либо параметр. Если он не принимает что-либо, вы должны использовать пустые скобки ( () ).
То же самое относится к функциям стрелок, которые принимают два или более параметров. В этом случае вы должны заключить эти параметры в скобки ( () ). И также убедитесь, что каждый параметр разделен комой. Теперь это оставляет нас с одним возможным сценарием, где круглые скобки являются необязательными.
Когда функция стрелки принимает только один параметр. Затем вы можете использовать или опустить круглые скобки. Помните, что если вам нравится использовать скобки, ничто не мешает вам сделать это. Вы можете использовать круглые скобки все время, независимо от количества параметров, и функции стрелок будут работать. В противном случае помните правило одного.
// Функция стрелки с 0 параметрами
// Скобки здесь обязательны
const myArrowFunc = () => // некоторый код
// Функция стрелки с 1 параметром
// Скобки здесь необязательны
const myArrowFunc = paramOne => // некоторый код
// Это также будет работать
const myArrowFunc = (paramOne) => // некоторый код
const myArrowFunc = (paramOne) => console.log (paramOne)
// Вызов myArrowFunc
myArrowFunc ( 'Нечто')
// Функция стрелки с 2+ параметрами
// Скобки здесь обязательны
const myArrowFunc = (paramOne, paramTwo) => // некоторый код
const myArrowFunc = (paramOne, paramTwo) => paramOne + paramTwo
// Вызов myArrowFunc
myArrowFunc (13, 46)
// 59
Дополнительные фигурные скобки
Еще одна вещь, которая является необязательной в случае функций со стрелками, — это фигурные скобки. Здесь условие даже проще, чем в случае скобок. Единственное, что имеет значение, так это то, является ли функция стрелки однострочной или нет. Если функция со стрелкой однострочная, вы можете опустить фигурные скобки, и эта функция будет работать, как и ожидалось.
В противном случае, если тело функции содержит код, занимающий более одной строки, необходимы фигурные скобки, и вы должны их использовать. Функция стрелки без фигурных скобок называется функцией стрелки с «кратким телом». Функция стрелки с фигурными скобками называется функцией стрелки с «блочным телом».
Как и в скобках, если вы хотите использовать фигурные скобки, вы можете использовать их все время, и это будет работать. Если вы хотите их опустить, помните, что это безопасно делать только в случае использования однострочных стрелок.
// Функция стрелки в одну строку
// Функция стрелки с лаконичным телом
// фигурные скобки здесь необязательны
const myArrowFunc = () => // некоторый код
const myArrowFunc = () => console.log ('Привет!')
// Это также будет работать
() => {/ * некоторый код * /}
const myArrowFunc = () => {/ * некоторый код * /}
const myArrowFunc = () => {console.log ('Hello!')}
// Вызов myArrowFunc
myArrowFunc ()
// Здравствуйте!
// Многострочная функция стрелки
// Функция стрелки с телом блока
// Здесь нужны фигурные скобки
const myArrowFunc = () => {
// некоторый код
}
const myArrowFunc = () => {
console.log («Это функция многострочной стрелки.»)
}
// Вызов myArrowFunc
myArrowFunc ()
// 'Это функция многострочной стрелки.'
Когда вы думаете об этом, это имеет смысл. В случае с одной строкой, JavaScript легко угадать, где начинаются тела функций стрелок и где они заканчиваются. Это не относится к телу функции, которое занимает несколько строк. В этом случае JavaScript не знает, где находятся границы тела функции.
Помните, что JavaScript не заботится о пробелах и отступах. Например, в Python вы можете указать, где тело функции начинается и заканчивается, делая отступ для этого блока кода. Это не будет работать в JavaScript. В JavaScript вы можете делать отступы своего кода так, как вам хочется, и JavaScript все равно будет просто улыбаться и игнорировать его.
// Это не сработает - опуская фигурные скобки
// Функция стрелки с лаконичным телом
// в многострочных функциях стрелок
() =>
// некоторый код
const myArrowFunc = () =>
// некоторый код
Неявное и явное возвращение
Одна интересная вещь в функциях стрелок заключается в том, что они имеют неявный возврат. Это означает, что функции стрелок возвращают значения автоматически. Вам не нужно использовать ключевое слово return . Тем не менее, это работает в двух конкретных ситуациях. Первый — когда функция стрелки однострочная.
Если стрелка однострочная, функция автоматически возвращает любой код в теле функции. Если функция стрелки не однострочная, вы должны использовать оператор return .
// Функция стрелки в одну строку
// явный оператор возврата не нужен
() => // некоторый код
const myArrowFunc = () => // некоторый код
// Вызов myArrowFunc
myArrowFunc ()
// Многострочная функция стрелки
// Требуется явный оператор возврата
() => {
возврат / * некоторый код * /
}
const myArrowFunc = () => {
возврат / * некоторый код * /
}
// Вызов myArrowFunc
myArrowFunc ()
Вторая ситуация, когда вам нужно использовать оператор return это когда функция стрелки использует тело блока, то есть тело функции с фигурными скобками. Это еще одна вещь, которую вы должны учитывать при принятии решения, какой синтаксис вы хотите использовать. Если вы хотите использовать «блочное тело» и фигурную скобку или «сжатое тело» без фигурной скобки.
Если это последнее, краткое тело, вам не нужно использовать явное выражение return . Если первое, тело блока, обязательно используйте оператор return .
// Функция стрелки со сжатым телом
// явный оператор возврата не нужен
() => // некоторый код (это краткое тело)
const myArrowFunc = () => // некоторый код (это краткое тело)
// Вызов myArrowFunc
myArrowFunc ()
// Функция стрелки с телом блока
// Требуется явный оператор возврата
() => {/ * некоторый код (это тело блока) * /}
const myArrowFunc = () => {/ * некоторый код (это тело блока) * /}
// Вызов myArrowFunc
myArrowFunc ()
Сразу же вызванные функции стрелок
JavaScript позволяет вам объявлять и вызывать функции одновременно. Эти функции называются немедленно вызванными функциями. Один из способов создать функцию такого типа — заключить функцию в скобки и добавить дополнительную пару скобок после скобок.
Второй способ также заключается в переносе функции с круглыми скобками и добавлении дополнительной пары круглых скобок после фигурных скобок, которые все еще находятся внутри круглых скобок. Третий способ — исключить скобки для переноса и поместить оператор NOT (! ) в начале строки перед ключевым словом function .
Четвертый способ аналогичен предыдущему, за исключением того, что вы заменяете оператор NOT на унарный оператор + .
// Немедленно вызванная функция № 1:
// вызов скобок вне скобок
(function () {
// некоторый код
}) ()
// Немедленно вызванная функция № 2:
// вызов скобок внутри скобок
(function () {
// некоторый код
} ())
// Немедленно вызванная функция № 3:
// с помощью ! (НЕ оператор)
! function () {
// некоторый код
} ()
// Немедленно вызванная функция № 4:
// Использование + (унарный оператор)
+ function () {
// некоторый код
} ()
Вы можете сделать то же самое и с функциями стрелок, создавая немедленно вызванные функции стрелок. Важно то, что в случае функций со стрелками вы можете использовать только первый способ. Другие три не удастся. Итак, заключите функцию стрелки в скобки и добавьте дополнительную пару скобок после скобок.
// Немедленно вызывается однострочная функция стрелки
// Это будет работать
// Обернуть функцию стрелки в скобки
// добавляем дополнительный набор скобок
// вне скобок
(() => / * некоторый код * /) ()
// Немедленно вызывается функция многострочной стрелки
// Это будет работать
(() => {
/ * некоторый код * /
}) ()
// Это не будет работать
(() => {
// некоторый код
} ())
// это тоже не сработает
! () => {
// некоторый код
} ()
// это тоже не сработает
+ () => {
// некоторый код
вернуть 'Foo'
} ()
Помните, что все правила о необязательных скобках и фигурных скобках по-прежнему применяются. Это означает, что если функция стрелки не имеет ни одного, ни двух параметров или параметров, вы должны включить скобки. Если он многострочный, вы должны использовать фигурные скобки и оператор return . Если он однострочный, но использует тело блока, вы также должны использовать оператор return .
// Краткое тело с неявным возвратом
(() => / * некоторый код * /) ()
// Тело блока с явным возвратом
(() => {return / * некоторый код * /}) ()
// Или
(() => {
возврат / * некоторый код * /
}) ()
Различия между функциями стрелки и функциями
Функции стрелок и функции аналогичны. Однако есть как минимум два важных различия. Давайте посмотрим на каждое из этих отличий. Это поможет вам решить, когда лучше использовать функции стрелок, а когда — функции.
Объект аргументов отсутствует
Когда вы работаете с функциями, вы всегда можете получить доступ к аргументам объекта. Этот объект содержит все значения, которые были переданы функции, когда она была вызвана. В случае функций со стрелками такого объекта нет. Даже если вы передадите некоторые аргументы функциям стрелок, JavaScript все равно выдаст ошибку ссылки, когда вы попытаетесь получить доступ к объекту arguments .
// Функция
const myFunction = function (param) {
вернуть аргументы
}
туРипсЫоп ( «Нечто»)
// {'0': 'Something'}
// Стрелка
const myArrowFunction = (param) => аргументы
myArrowFunction ( 'Нечто')
// ReferenceError: аргументы не определены
Итак, помните, если вы планируете использовать аргумент объектная регулярная функция — лучший выбор, чем функция стрелки.
Нет привязки этого
Еще одна вещь, которая отсутствует в функциях стрелок — это это . Когда вы работаете с функциями, каждый раз, когда вы определяете функцию, она также создает свою собственную эту . Если вы не используете строгий режим этот будет ссылаться на объект глобального окна . Если вы используете строгий режим, значение этого будет неопределенным.
Когда вы используете функцию для создания конструктора функции этот будет новым объектом. Если вы используете функцию как объект или класс, метод этот будет ссылаться на родительский объект или класс этой функции.
// Это в нестрогом режиме
function myFunction () {
console.log (это, это === окно)
}
туРипсЫоп ()
// [object Window]правда
///
// Это в строгом режиме
«использовать строгое»
function myFunction () {
console.log (это, это === окно)
}
туРипсЫоп ()
// undefined, false
// Функция внутри объекта
const myObj = {
название: «Атлант пожал плечами»,
автор: «Айн Рэнд»,
getBook: function () {
// Это относится к myObj
// Итак, this.title похож на myObj.title
вернуть `$ {this.title} на $ {this.author} .`
}
}
myObj.getBook ()
// 'Атлас пожимает плечами Айн Рэнд.'
В случае функций стрелок ситуация иная. Функции стрелки не имеют своих собственных этого . Функции стрелок наследуют этот из контекста выполнения, в котором они используются. Когда вы находитесь в глобальной среде по умолчанию, контекст выполнения также является глобальным, обычно это объект window .
// Это в нестрогом режиме
// Стрелка
let myArrowFunction = () => {
console.log (это, это === окно)
}
myArrowFunction ()
// [object Window]правда
///
// Это в строгом режиме
«использовать строгое»
let myArrowFunction = () => {
console.log (это, это === окно)
}
myArrowFunction ()
// [object Window]правда
Когда вы находитесь в функции, контекст выполнения становится функцией. Для функций со стрелками привязка к и отсутствует. Вместо этого этот унаследован от своего первоначального контекста. Если все, что есть, это объект, контекст выполнения будет глобальным, объект window . Это проблема.
Представьте, что у вас есть функция стрелки внутри объекта. Когда вы используете этот внутри этой функции стрелки, он будет ссылаться на глобальный контекст выполнения, окно а не на объект, в котором он находится. Это означает, что вы не можете использовать этот когда хотите сослаться на какое-то свойство внутри этого объекта.
Помните, что этот теперь ссылается на окно и окно не имеет этого свойства. Так что, если вы попробуете это, JavaScript выдаст ошибку типа. Решение? Вместо этого используйте обычную функцию.
// Функция стрелки внутри объекта
const myObj = {
название: «Атлант пожал плечами»,
автор: «Айн Рэнд»,
getBook: () => {
// Это относится к окну глобального объекта
// Итак, this.title похож на window.title
вернуть `$ {this.title} на $ {this.author} .`
},
getBookWithRegularFunction: function () {
// Это относится к myObj
// Итак, this.title похож на myObj.title
вернуть `$ {this.title} на $ {this.author} .`
}
}
myObj.getBook ()
// TypeError: Невозможно прочитать свойство 'title' из неопределенного
myObj.getBookWithRegularFunction ()
// 'Атлас пожимает плечами Айн Рэнд.'
Это одна из причин, почему функции стрелок не лучший выбор для объектных методов. Кроме того, функции стрелок нельзя использовать в качестве конструкторов. Если вы попытаетесь это сделать, JavaScript выдаст ошибку типа.
Вывод: JavaScript Arrow Функции
Надеюсь, эта статья помогла вам узнать о функциях стрелок JavaScript, о том, как они работают и как их использовать. Напомним, что сегодня вы узнали об основных функциях стрелок и синтаксисе. Далее вы также узнали о параметрах, скобках и фигурных скобках, а также о том, когда вы можете их опускать, а когда нет.
После этого вы также узнали о неявном и явном возврате, когда вы можете опустить оператор return а когда нет. После этого вы узнали, как создавать функции мгновенного вызова стрелок. Наконец, вы также узнали о двух основных различиях между функциями стрелок и функциями. На этом спасибо за ваше время.
<! —
У вас есть какие-либо вопросы, рекомендации, мысли, советы или советы, которыми вы бы хотели поделиться со мной и другими читателями этого блога? Пожалуйста, поделитесь этим в комментарии. Вы также можете отправить мне письмо. Я хотел бы услышать от вас.
->
<! —
Хотите узнать больше?
->
Если вам понравилась эта статья, пожалуйста, подпишитесь, чтобы не пропустить ни одного будущего поста.
<! —
Вы в соцсетях? Давайте соединяться! Вы можете найти меня в Twitter, GitHub и Dribbble.
->
Загрузка...
