JavaScript
Funkcje strzałek

Wprowadzenie

Składnia

• x => y // Domniemany zwrot

• x => {return y} // Jawny zwrot

• (x, y, z) => {...} // Wiele argumentów

• async () => {...} // Funkcje strzałek asynchronicznych

• (() => {...}) () // Natychmiastowe wywołanie wyrażenia funkcyjnego

• const myFunc = x

  => x * 2 // Przerwanie linii przed strzałką spowoduje wygenerowanie błędu „Nieoczekiwany token”

• const myFunc = x =>

  x * 2 // Podział wiersza po strzale jest poprawną składnią

Uwagi

Wprowadzenie

W JavaScript funkcje mogą być anonimowo zdefiniowane przy użyciu składni „arrow” ( => ), która jest czasami nazywana wyrażeniem lambda ze względu na podobieństwa Common Lisp .

Najprostsza forma funkcji strzałki ma argumenty po lewej stronie => a wartość zwracaną po prawej stronie:

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

Tę funkcję można natychmiast wywołać , podając argument do wyrażenia:

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

Jeśli funkcja strzałki przyjmuje pojedynczy parametr, nawiasy wokół tego parametru są opcjonalne. Na przykład następujące wyrażenia przypisują ten sam typ funkcji do zmiennych stałych :

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

Jeśli jednak funkcja strzałki nie przyjmuje żadnych parametrów lub więcej niż jednego parametru, nowy zestaw nawiasów musi zawierać wszystkie argumenty:

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

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

Jeśli treść funkcji nie składa się z jednego wyrażenia, musi być otoczona nawiasami i użyć jawnej instrukcji return w celu uzyskania wyniku:

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

Jeśli ciało funkcji strzałki składa się tylko z literału obiektu, ten literał obiektu musi być ujęty w nawiasy:

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

Dodatkowe nawiasy wskazują, że nawiasy otwierające i zamykające są częścią literału obiektu, tj. Nie są ogranicznikami treści funkcji.

Schemat leksykalny i oprawa (wartość „tego”)

Funkcje strzałek mają zasięg leksykalny ; Oznacza to, że ich this Oprawa jest związany kontekście otaczającej zakresie. To znaczy, cokolwiek this dotyczy, można zachować za pomocą funkcji strzałki.

Spójrz na następujący przykład. Klasa Cow ma metodę, która pozwala wydrukować dźwięk, który wydaje po 1 sekundzie.

class Cow {

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

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

const betsy = new Cow();

betsy.makeSoundLater();

W makeSoundLater() this kontekst odnosi się do bieżącej instancji obiektu Cow , więc w przypadku wywołania betsy.makeSoundLater() kontekst this odnosi się do betsy .

Używając funkcji strzałki, zachowuję this kontekst, aby móc odwołać się do this.sound gdy przyjdzie czas, aby go wydrukować, co poprawnie wydrukuje „moo”.

Jeśli użyłeś zwykłej funkcji zamiast funkcji strzałki, straciłbyś kontekst bycia w klasie i nie byłbyś w stanie uzyskać bezpośredniego dostępu do właściwości sound .

Obiekt argumentów

Funkcje strzałek nie ujawniają obiektu argumentów; dlatego arguments odnosiłyby się po prostu do zmiennej w bieżącym zakresie.

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

foo(false); // -> true

Z tego powodu funkcje strzałek również nie są świadome swojego dzwoniącego / odbierającego.

Podczas gdy brak obiektu argumentów może być ograniczeniem w niektórych przypadkach krawędzi, parametry spoczynkowe są ogólnie odpowiednią alternatywą.

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

foo(false); // -> false

Implikowany zwrot

Funkcje strzałek mogą domyślnie zwracać wartości, po prostu pomijając nawiasy klamrowe, które tradycyjnie otaczają ciało funkcji, jeśli ich ciało zawiera tylko jedno wyrażenie.

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

Podczas korzystania z niejawnych zwrotów literały obiektów muszą być owinięte w nawiasach, aby nawiasy klamrowe nie były mylone z otwieraniem ciała funkcji.

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

Jawny zwrot

Funkcje strzałek mogą zachowywać się bardzo podobnie do klasycznych funkcji, ponieważ możesz jawnie zwrócić z nich wartość za pomocą słowa kluczowego return ; po prostu owiń ciało funkcji nawiasami klamrowymi i zwróć wartość:

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

foo(1); // -> 2

Arrow działa jako konstruktor

Funkcje strzałek TypeError gdy są używane z new słowem kluczowym.

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

const a = new foo();

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

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