JavaScript
Pijl functies

Invoering

Syntaxis

• x => y // Impliciet rendement

• x => {return y} // Expliciete retour

• (x, y, z) => {...} // Meerdere argumenten

• async () => {...} // Async pijlfuncties

• (() => {...}) () // Onmiddellijk aangeroepen functie-uitdrukking

• const myFunc = x

  => x * 2 // Een regeleinde voor de pijl geeft een fout 'Onverwachte token'

• const myFunc = x =>

  x * 2 // Een regeleinde na de pijl is een geldige syntaxis

Opmerkingen

Invoering

In JavaScript kunnen functies anoniem worden gedefinieerd met behulp van de "pijl" ( => ) syntaxis, die soms wordt aangeduid als een lambda-expressie vanwege Common Lisp-overeenkomsten .

De eenvoudigste vorm van een pijlfunctie heeft zijn argumenten aan de linkerkant van => en de retourwaarde aan de rechterkant:

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

Deze functie kan onmiddellijk worden opgeroepen door een argument te geven aan de uitdrukking:

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

Als een pijlfunctie een enkele parameter gebruikt, zijn de haakjes rondom die parameter optioneel. De volgende uitdrukkingen wijzen bijvoorbeeld hetzelfde type functie toe aan constante variabelen :

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

Echter, als de pijl functie geen parameters, of meer dan één parameter neemt, een nieuwe set haakjes moeten alle argumenten omsluiten:

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

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

Als de hoofdtekst niet uit een enkele uitdrukking bestaat, moet deze tussen haakjes worden geplaatst en moet een expliciete return worden gebruikt voor het leveren van een resultaat:

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

Als het lichaam van de pijlfunctie alleen uit een letterlijk object bestaat, moet dit letterlijke object tussen haakjes worden geplaatst:

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

De extra haakjes geven aan dat de openings- en sluitbeugels onderdeel zijn van het letterlijke object, dat wil zeggen dat ze geen begrenzers van het functielichaam zijn.

Lexical Scoping & Binding (waarde van "dit")

Pijlfuncties zijn lexicaal gericht ; dit betekent dat hun this bindend is gebonden aan de context van de omliggende scope. Dat wil zeggen dat alles waarnaar this verwijst, kan worden bewaard met behulp van een pijlfunctie.

Bekijk het volgende voorbeeld. De klasse Cow heeft een methode waarmee hij na 1 seconde het geluid kan afdrukken dat hij maakt.

class Cow {

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

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

const betsy = new Cow();

betsy.makeSoundLater();

In de methode makeSoundLater() verwijst this context naar de huidige instantie van het Cow object, dus in het geval waarin ik betsy.makeSoundLater() aanroep, verwijst this context naar betsy .

Door het gebruik van de pijl-functie, behoud ik het this context, zodat ik aan de hand van kan maken this.sound wanneer het tijd is om het uit te drukken, die naar behoren zullen uitprinten "moo" komt.

Als u een normale functie had gebruikt in plaats van de pijlfunctie, zou u de context verliezen dat u zich in de klasse bevindt en niet rechtstreeks toegang hebben tot de eigenschap sound .

Argumenten Object

Pijlfuncties stellen geen argumentenobject bloot; daarom zouden arguments eenvoudigweg verwijzen naar een variabele in het huidige bereik.

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

foo(false); // -> true

Hierdoor zijn pijlfuncties ook niet op de hoogte van hun beller / oproep.

Hoewel het ontbreken van een argumentobject in sommige randgevallen een beperking kan zijn, zijn rustparameters over het algemeen een geschikt alternatief.

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

foo(false); // -> false

Impliciete terugkeer

Pijlfuncties kunnen impliciet waarden retourneren door eenvoudigweg de accolades weg te laten die traditioneel het lichaam van een functie omhullen als hun lichaam slechts een enkele uitdrukking bevat.

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

Wanneer impliciete retouren worden gebruikt, moeten objectliteralen tussen haakjes worden ingepakt, zodat de accolades niet worden aangezien voor het openen van het hoofdgedeelte van de functie.

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

Expliciete terugkeer

Pijlfuncties kunnen zich heel erg gedragen als klassieke functies , omdat u er expliciet een waarde uit kunt retourneren met het trefwoord return ; wikkel het lichaam van je functie gewoon in accolades en retourneer een waarde:

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

foo(1); // -> 2

Arrow functioneert als een constructor

TypeError werpen een TypeError bij gebruik met het new trefwoord.

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

const a = new foo();

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

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