JavaScript-pilfunktion

I denna handledning lär du dig om JavaScript-pilfunktionen med hjälp av exempel.

Pilfunktionen är en av funktionerna som introduceras i ES6-versionen av JavaScript. Det låter dig skapa funktioner på ett renare sätt jämfört med vanliga funktioner. Till exempel
Denna funktion

 // function expression let x = function(x, y) ( return x * y; )

kan skrivas som

 // using arrow functions let x = (x, y) => x * y;

med en pilfunktion.

Pilsfunktionssyntax

Syntaxen för pilfunktionen är:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Här,

  • myFunction är namnet på funktionen
  • arg1, arg2,… argN är funktionsargumenten
  • statement(s) är funktionskroppen

Om kroppen har ett enda uttalande eller uttryck kan du skriva pilfunktionen som:

 let myFunction = (arg1, arg2,… argN) => expression

Exempel 1: Pilfunktion utan argument

Om en funktion inte tar något argument bör du använda tomma parenteser. Till exempel,

 let greet = () => console.log('Hello'); greet(); // Hello

Exempel 2: Pilfunktion med ett argument

Om en funktion bara har ett argument kan du utelämna parenteserna. Till exempel,

 let greet = x => console.log(x); greet('Hello'); // Hello

Exempel 3: Pilfunktion som ett uttryck

Du kan också skapa en funktion dynamiskt och använda den som ett uttryck. Till exempel,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Exempel 4: Funktioner med flera linjer

Om en funktionsdel har flera påståenden måste du placera dem inom lockiga parenteser (). Till exempel,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

detta med pilfunktionen

Inuti en vanlig funktion hänvisar detta nyckelord till den funktion där den kallas.

Förknippas dock thisinte med pilfunktioner. Pilfunktionen har inte sin egen this. Så när du ringer thishänvisar det till dess överordnade omfång. Till exempel,

Inuti en vanlig funktion

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Produktion

 25 odefinierat fönster ()

Här är this.ageinsidan this.sayName()tillgängligt eftersom det this.sayName()är metoden för ett objekt.

Det innerFunc()är dock en normal funktion och this.ageär inte tillgänglig eftersom det thishänvisar till det globala objektet (Window-objekt i webbläsaren). Därför ger funktionen this.ageinuti .innerFunc()undefined

Inuti en pilfunktion

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Produktion

 25 25

Här innerFunc()definieras funktionen med hjälp av pilfunktionen. Och inuti pilfunktionen thishänvisar till föräldrarnas omfattning. Därför this.ageger 25 .

Argument bindande

Vanliga funktioner har bindande argument. Det är därför när du skickar argument till en vanlig funktion kan du komma åt dem med argumentsnyckelordet. Till exempel,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Pilfunktionerna har inga bindande argument.

När du försöker komma åt ett argument med hjälp av pilfunktionen kommer det att ge ett fel. Till exempel,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

För att lösa problemet kan du använda spridningssyntaxen. Till exempel,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Pilfunktion med löften och återuppringningar

Pilfunktioner ger bättre syntax för att skriva löften och återuppringningar. Till exempel,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

kan skrivas som

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Saker du bör undvika med pilfunktioner

1. Du bör inte använda pilfunktioner för att skapa metoder inuti objekt.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Du kan inte använda en pilfunktion som konstruktör . Till exempel,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Obs! Pilfunktioner introducerades i ES6 . Vissa webbläsare stöder kanske inte pilfunktionerna. Besök JavaScript Arrow Function support för att lära dig mer.

Intressanta artiklar...