JavaScript
Funzioni della freccia

introduzione

Sintassi

• x => y // Ritorno implicito

• x => {return y} // ritorno esplicito

• (x, y, z) => {...} // Argomenti multipli

• async () => {...} // Funzioni freccia asincrone

• (() => {...}) () // Espressione funzione invocata immediatamente

• const myFunc = x

  => x * 2 // Un'interruzione di riga prima della freccia genera un errore "Token inatteso"

• const myFunc = x =>

  x * 2 // Un'interruzione di riga dopo la freccia è una sintassi valida

Osservazioni

introduzione

In JavaScript, le funzioni possono essere definite in modo anonimo usando la sintassi "arrow" ( => ), che a volte viene chiamata espressione lambda a causa delle somiglianze del Common Lisp .

La forma più semplice di una funzione freccia ha i suoi argomenti sul lato sinistro di => e il valore di ritorno sul lato destro:

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

Questa funzione può essere invocata immediatamente fornendo un argomento all'espressione:

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

Se una funzione freccia richiede un singolo parametro, le parentesi attorno a quel parametro sono facoltative. Ad esempio, le seguenti espressioni assegnano lo stesso tipo di funzione a variabili costanti :

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

Tuttavia, se la funzione freccia non accetta parametri o più di un parametro, una nuova serie di parentesi deve racchiudere tutti gli argomenti:

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

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

Se il corpo della funzione non è costituito da una singola espressione, deve essere racchiuso tra parentesi e utilizzare un'istruzione di return esplicita per fornire un risultato:

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

Se il corpo della funzione di freccia è costituito solo da un oggetto letterale, questo oggetto letterale deve essere racchiuso tra parentesi:

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

Le parentesi aggiuntive indicano che le parentesi di apertura e chiusura fanno parte dell'oggetto letterale, ovvero non sono delimitatori del corpo della funzione.

Lexical Scoping & Binding (Valore di "this")

Le funzioni della freccia sono indicate in modo lessicale ; ciò significa che la loro this legame è legato al contesto dell'ambito circostante. Vale a dire, qualunque cosa this riferisca a può essere preservata usando una funzione di freccia.

Dai un'occhiata al seguente esempio. La classe Cow ha un metodo che consente di stampare il suono che produce dopo 1 secondo.

class Cow {

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

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

const betsy = new Cow();

betsy.makeSoundLater();

Nella makeSoundLater() metodo, la this contesto si riferisce alla istanza corrente della Cow oggetto, così nel caso in cui chiamo betsy.makeSoundLater() , la this contesto si riferisce a betsy .

Usando la funzione freccia, conservo this contesto in modo che io possa fare riferimento a this.sound Quando viene il momento di stamparlo, che stamperà correttamente "moo".

Se avessi usato una funzione regolare al posto della funzione freccia, perderai il contesto di essere all'interno della classe e non sarai in grado di accedere direttamente alla proprietà sound .

Argomenti Oggetto

Le funzioni freccia non espongono un argomento oggetto; pertanto, gli arguments farebbero semplicemente riferimento a una variabile nell'ambito corrente.

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

foo(false); // -> true

A causa di ciò, le funzioni freccia non sono a conoscenza del loro chiamante / chiamato.

Mentre la mancanza di un argomento oggetto può essere una limitazione in alcuni casi limite, i parametri di riposo sono generalmente un'alternativa adatta.

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

foo(false); // -> false

Ritorno implicito

Le funzioni freccia possono restituire implicitamente i valori semplicemente omettendo le parentesi graffe che tradizionalmente avvolgono il corpo di una funzione se il loro corpo contiene solo una singola espressione.

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

Quando si utilizzano i ritorni impliciti, i valori letterali degli oggetti devono essere racchiusi tra parentesi in modo che le parentesi graffe non vengano scambiate per l'apertura del corpo della funzione.

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

Ritorno esplicito

Le funzioni di freccia possono comportarsi in modo molto simile alle funzioni classiche in quanto è possibile restituire esplicitamente un valore utilizzando la parola chiave return ; semplicemente avvolgi il corpo della tua funzione in parentesi graffe e restituisci un valore:

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

foo(1); // -> 2

La freccia funziona come un costruttore

Le funzioni freccia generano un TypeError quando utilizzato con la new parola chiave.

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

const a = new foo();

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

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