Учебник по функциям стрелок JavaScript

Функции со стрелками были представлены в ES6/ECMAScript 2015, и с момента их появления они навсегда изменили внешний вид (и работу) кода JavaScript.

На мой взгляд, это изменение было настолько приятным, что теперь вы редко видите использование функции ключевое слово в современных кодовых базах. Хотя это все еще имеет свое применение.

Визуально это простое и желанное изменение, которое позволяет вам писать функции с более коротким синтаксисом, начиная с:

const myFunction = function() {
  //...
}

const myFunction = () => {
  //...
}

Если тело функции содержит только один оператор, вы можете опустить скобки и записать все в одной строке:

const myFunction = () => doSomething()

Параметры передаются в круглых скобках:

const myFunction = (param1, param2) => doSomething(param1, param2)

Если у вас есть один (и только один) параметр, вы можете полностью опустить круглые скобки:

const myFunction = param => doSomething(param)

Благодаря этому короткому синтаксису функции со стрелками поощряют использование небольших функций .

Неявный возврат

Функции со стрелками позволяют получить неявный возврат: значения возвращаются без необходимости использовать return ключевое слово.

Это работает, когда в теле функции есть однострочный оператор:

const myFunction = () => 'test'

myFunction() //'test'

Другой пример: возвращая объект, не забудьте заключить фигурные скобки в круглые скобки, чтобы это не считалось скобками тела функции переноса:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: 'test'}

Как это работает в функциях со стрелками

это концепция, которую может быть сложно понять, так как она сильно варьируется в зависимости от контекста, а также зависит от режима JavaScript ( строгий режим или нет).

Важно прояснить эту концепцию, потому что функции со стрелками ведут себя совсем по-другому по сравнению с обычными функциями.

Когда определено как метод объекта, в обычной функции это относится к объекту, поэтому вы можете сделать:

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

вызов car.FullName() вернет "Форд Фиеста" .

Эта область с функциями со стрелками наследуется из контекста выполнения. Функция со стрелкой вообще не связывает это , поэтому ее значение будет отображаться в стеке вызовов, поэтому в этом коде car.FullName() не будет работать и вернет строку "неопределенный неопределенный" :

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

Из-за этого функции со стрелками не подходят в качестве методов объектов.

Функции со стрелками также нельзя использовать в качестве конструкторов, когда создание экземпляра объекта вызовет Ошибка типа .

Именно здесь вместо этого следует использовать обычные функции, когда динамический контекст не нужен .

Это также является проблемой при обработке событий. Прослушиватели событий DOM устанавливают это в качестве целевого элемента, и если вы полагаетесь на это в обработчике событий, необходима обычная функция:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})

const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

Оригинал: “https://flaviocopes.com/javascript-arrow-functions/”

Неявный возврат

Как это работает в функциях со стрелками

Читайте ещё по теме: