JavaScript
Pilfunktioner

Introduktion

Syntax

• x => y // Implicit return

• x => {return y} // Explicit return

• (x, y, z) => {...} // Flera argument

• async () => {...} // Async-pilfunktioner

• (() => {...}) () // Omedelbart åberopad funktionsuttryck

• const myFunc = x

  => x * 2 // En radbrytning innan pilen kastar ett "Oväntat token" -fel

• const myFunc = x =>

  x * 2 // En radbrytning efter pilen är en giltig syntax

Anmärkningar

Introduktion

I JavaScript kan funktioner definieras anonymt med hjälp av syntaxen "pil" ( => ), som ibland kallas för ett lambda-uttryck på grund av Common Lisp-likheter .

Den enklaste formen av en pilfunktion har sina argument på vänster sida av => och returvärdet på höger sida:

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

Denna funktion kan omedelbart åberopas genom att tillhandahålla ett argument till uttrycket:

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

Om en pilfunktion tar en enda parameter är parenteserna kring den parametern valfria. Till exempel tilldelar följande uttryck samma typ av funktion i konstantvariabler :

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

Men om pilfunktionen inte tar några parametrar, eller mer än en parameter, måste en ny uppsättning parenteser innehålla alla argument:

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

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

Om funktionen kroppen inte bestå av ett enda uttryck, måste det vara omgiven av konsoler och använda en explicit return uttalande för att ge ett resultat:

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

Om pilfunktionens kropp endast består av ett objekt bokstavligt, måste detta objekt bokstavs vara inneslutet inom parentes:

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

De extra parenteserna indikerar att öppnings- och stängningsfästena är en del av objektets bokstavliga, dvs. de är inte avgränsare av funktionskroppen.

Lexical Scoping & Binding (värdet av "detta")

Pilfunktioner är lexiskt skopade ; Detta innebär att deras this Bindning är bunden till det sammanhang i den omgivande ramen. Det vill säga, allt this hänvisar till kan bevaras med hjälp av en pilfunktion.

Ta en titt på följande exempel. Klassen Cow har en metod som gör det möjligt att skriva ut ljudet som den gör efter 1 sekund.

class Cow {

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

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

const betsy = new Cow();

betsy.makeSoundLater();

I makeSoundLater() hänvisar this sammanhang till den nuvarande förekomsten av Cow objektet, så i fallet där jag kallar betsy.makeSoundLater() hänvisar this sammanhang till betsy .

Genom att använda pilfunktionen bevarar jag this sammanhang så att jag kan hänvisa till detta. this.sound när det är dags att skriva ut det, vilket ordentligt kommer att skriva ut "moo".

Om du hade använt en vanlig funktion istället för pilfunktionen, skulle du förlora kontexten att vara inom klassen och inte ha tillgång till sound direkt.

Argumentobjekt

Pilfunktioner exponerar inte ett argumentobjekt; därför skulle arguments helt enkelt hänvisa till en variabel i det aktuella omfånget.

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

foo(false); // -> true

På grund av detta är pilfunktionerna inte heller medvetna om deras uppringare / callee.

Även om bristen på ett argumentobjekt kan vara en begränsning i vissa kantfall, är viloparametrar i allmänhet ett lämpligt alternativ.

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

foo(false); // -> false

Implicit Return

Pilfunktioner kan implicit returnera värden genom att helt enkelt utelämna de lockiga hängslen som traditionellt lindar en funktions kropp om deras kropp bara innehåller ett enda uttryck.

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

Vid användning av implicita returer måste objektlitteraler vara lindade i parentes så att de lockiga hängslen inte misstas för öppningen av funktionens kropp.

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

Explicit Return

Arrow funktioner kan bete sig väldigt likt klassiska funktioner i att du uttryckligen kan returnera ett värde från dem med hjälp av return nyckelordet; packa helt enkelt din funktions kropp i lockiga hängslen och returnera ett värde:

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

foo(1); // -> 2

Pil fungerar som en konstruktör

TypeError kastar en TypeError när den används med det new sökordet.

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

const a = new foo();

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

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