JavaScript
Функции стрелки

Вступление

Синтаксис

• x => y // Неявный возврат

• x => {return y} // Явный возврат

• (x, y, z) => {...} // Несколько аргументов

• async () => {...} // Функции функции Async arrow

• (() => {...}) () // Выражение функции с немедленным вызовом

• const myFunc = x

  => x * 2 // Разрыв строки перед тем, как стрелка вызовет ошибку «Неожиданный токен»

• const myFunc = x =>

  x * 2 // Разрыв строки после того, как стрелка является допустимым синтаксисом

замечания

Вступление

В JavaScript функции могут быть анонимно определены с использованием синтаксиса «arrow» ( => ), который иногда называют лямбда-выражением из-за общих сходств Лиспа .

Простейшая форма функции стрелки имеет свои аргументы в левой части => и возвращаемое значение в правой части:

item => item + 1 // -> function(item){return item + 1}

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

(item => item + 1)(41) // -> 42

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

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

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

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

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

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

Если тело функции стрелки состоит только из объектного литерала, этот литерал объекта должен быть заключен в круглые скобки:

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

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

Лексическое определение и привязка (значение «this»)

Функции стрелки лексически ограничены ; это означает , что их this Binding связана с контекстом окружающей области. То есть, что бы this ни говорило, можно сохранить с помощью функции стрелки.

Взгляните на следующий пример. Класс Cow имеет метод, позволяющий распечатывать звук, который он делает через 1 секунду.

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

В makeSoundLater() this контекст относится к текущему экземпляру объекта Cow , поэтому в случае, когда я вызываю betsy.makeSoundLater() , this контекст относится к betsy .

Используя функцию стрелки, я сохраняю this контекст, чтобы я мог ссылаться на this.sound когда пришло время распечатать его, что будет правильно распечатывать «moo».

Если вы использовали регулярную функцию вместо функции стрелки, вы потеряете контекст пребывания внутри класса и не сможете напрямую обращаться к sound свойству.

Объект Аргументов

Функции Arrow не выставляют объект аргументов; поэтому arguments просто ссылаются на переменную в текущей области.

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

Благодаря этому функции стрелок также не знают своего вызывающего абонента / вызываемого абонента.

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

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

Неявное возвращение

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

const foo = x => x + 1;
foo(1); // -> 2

При использовании неявных возвратов литералы объектов должны быть завернуты в круглые скобки, чтобы фигурные скобки не ошибались при открытии тела функции.

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

Явное возвращение

Функции Arrow могут вести себя очень похоже на классические функции, поскольку вы можете явно вернуть значение из них с помощью ключевого слова return ; просто оберните тело вашей функции фигурными фигурными скобками и верните значение:

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

Стрелка функционирует как конструктор

Функции Arrow будут TypeError при использовании с new ключевым словом.

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...