/ Новости и уроки / Как использовать стрелочные функции

Как использовать стрелочные функции

55
Как использовать стрелочные функции

Стрелочные функции являются одними из самых значительных изменений в ES6 / ES2015, и они широко используются в настоящее время. Они немного отличаются от обычных функций. Давайте выясним как.

Стрелочные функции были введены в ES6 / ECMAScript 2015, и с момента их появления они навсегда изменили то, как код JavaScript выглядит и работает.

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

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


span class="hljs-keyword" style="color: rgb(0, 0, 255);">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'

Как this работает в стрелочных функциях

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

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

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


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

вызов car.fullName() вернет "Ford Fiesta".

Область действия this с стрелочными функциями наследуется от контекста выполнения. Они вообще не связывает это, поэтому ее значение будет найдено в стеке вызовов, поэтому в этом коде car.fullName() не будет работать и вернет строку «undefined undefined»:


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


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

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

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