JavaScript-pilefunktion

I denne vejledning lærer du om JavaScript-pilfunktion ved hjælp af eksempler.

Pilefunktion er en af ​​de funktioner, der introduceres i ES6-versionen af ​​JavaScript. Det giver dig mulighed for at oprette funktioner på en renere måde sammenlignet med almindelige funktioner. For eksempel
Denne funktion

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

kan skrives som

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

ved hjælp af en pilfunktion.

Pilefunktionssyntaks

Syntaksen for pilfunktionen er:

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

Her,

  • myFunction er funktionens navn
  • arg1, arg2,… argN er funktionsargumenterne
  • statement(s) er funktionskroppen

Hvis kroppen har et enkelt udsagn eller udtryk, kan du skrive pilens funktion som:

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

Eksempel 1: Pilefunktion uden argument

Hvis en funktion ikke tager noget argument, skal du bruge tomme parenteser. For eksempel,

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

Eksempel 2: Pilefunktion med ét argument

Hvis en funktion kun har et argument, kan du udelade parenteserne. For eksempel,

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

Eksempel 3: Pilefunktion som udtryk

Du kan også dynamisk oprette en funktion og bruge den som et udtryk. For eksempel,

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

Eksempel 4: Multiline pilefunktioner

Hvis et funktionsorgan har flere udsagn, skal du placere dem i krøllede parenteser (). For eksempel,

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

dette med pilefunktion

Inde i en almindelig funktion henviser dette nøgleord til den funktion, hvor det kaldes.

Er imidlertid thisikke forbundet med pilfunktioner. Pilfunktionen har ikke sin egen this. Så når du ringer this, henviser det til dets overordnede omfang. For eksempel,

Inde i en almindelig 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 udefineret vindue ()

Her er this.ageindvendigt this.sayName()tilgængeligt, fordi det this.sayName()er metoden til et objekt.

Det er dog innerFunc()en normal funktion og this.ageer ikke tilgængelig, fordi det thisrefererer til det globale objekt (Window-objekt i browseren). Derfor this.ageinde i innerFunc()funktionen giver undefined.

Inde i 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

Her innerFunc()defineres funktionen ved hjælp af pilfunktionen. Og inde i pilfunktionen thisrefererer til forældrenes omfang. Derfor this.agegiver 25 .

Argumenter bindende

Almindelige funktioner har argumenter, der er bindende. Derfor, når du sender argumenter til en almindelig funktion, kan du få adgang til dem ved hjælp af argumentsnøgleordet. For eksempel,

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

Pilefunktioner har ikke bindende argumenter.

Når du prøver at få adgang til et argument ved hjælp af pilfunktionen, giver det en fejl. For eksempel,

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

For at løse dette problem kan du bruge den spredte syntaks. For eksempel,

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

Pilefunktion med løfter og tilbagekald

Pile-funktioner giver bedre syntaks til at skrive løfter og tilbagekald. For eksempel,

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

kan skrives som

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

Ting du bør undgå med pilefunktioner

1. Du bør ikke bruge pilefunktioner til at oprette metoder inde i objekter.

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

2. Du kan ikke bruge en pilefunktion som konstruktør . For eksempel,

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

Bemærk : Pilefunktioner blev introduceret i ES6 . Nogle browsere understøtter muligvis ikke brugen af ​​pilfunktioner. Besøg JavaScript Arrow Function support for at lære mere.

Interessante artikler...