JavaScript-pijlfunctie

In deze tutorial leert u met behulp van voorbeelden over de JavaScript-pijlfunctie.

De pijlfunctie is een van de functies die is geïntroduceerd in de ES6-versie van JavaScript. Hiermee kunt u functies op een schonere manier creëren in vergelijking met reguliere functies. Bijvoorbeeld
deze functie

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

kan worden geschreven als

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

met behulp van een pijlfunctie.

Arrow Functie Syntax

De syntaxis van de pijlfunctie is:

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

Hier,

• myFunction is de naam van de functie
• arg1, arg2,… argN zijn de functieargumenten
• statement(s) is het functielichaam

Als het lichaam een ​​enkele instructie of uitdrukking heeft, kunt u de pijlfunctie schrijven als:

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

Voorbeeld 1: pijlfunctie zonder argument

Als een functie geen argument accepteert, moet u lege haakjes gebruiken. Bijvoorbeeld,

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

Voorbeeld 2: pijlfunctie met één argument

Als een functie maar één argument heeft, kunt u de haakjes weglaten. Bijvoorbeeld,

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

Voorbeeld 3: Pijlfunctie als uitdrukking

U kunt ook dynamisch een functie maken en deze als uitdrukking gebruiken. Bijvoorbeeld,

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

Voorbeeld 4: Functies met meerdere regelspijlen

Als de hoofdtekst van een functie meerdere instructies heeft, moet u deze tussen accolades plaatsen (). Bijvoorbeeld,

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

dit met Arrow Function

Binnen een reguliere functie verwijst dit sleutelwoord naar de functie waar het wordt aangeroepen.

Echter thisis niet geassocieerd met pijl functies. De pijlfunctie heeft geen eigen functie this. Dus wanneer u belt this, verwijst het naar het bovenliggende bereik. Bijvoorbeeld,

Binnen een reguliere functie

 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();

Uitvoer

 25 undefined Venster ()

Hier is this.agebinnen this.sayName()toegankelijk omdat het this.sayName()de methode van een object is.

Dit innerFunc()is echter een normale functie en this.ageis niet toegankelijk omdat het thisverwijst naar het globale object (Window-object in de browser). Vandaar dat this.agebinnen de innerFunc()functie geeft undefined.

Binnen een pijlfunctie

 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();

Uitvoer

 25 25

Hier wordt de innerFunc()functie gedefinieerd met behulp van de pijlfunctie. En binnen de pijlfunctie thisverwijst naar het bereik van de ouder. Daarom this.agegeeft 25 .

Argumenten bindend

Normale functies hebben bindende argumenten. Dat is de reden waarom wanneer u argumenten doorgeeft aan een reguliere functie, u ze kunt openen met behulp van het argumentstrefwoord. Bijvoorbeeld,

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

Pijlfuncties hebben geen bindende argumenten.

Wanneer u probeert toegang te krijgen tot een argument met behulp van de pijlfunctie, geeft dit een foutmelding. Bijvoorbeeld,

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

Om dit probleem op te lossen, kunt u de spread-syntaxis gebruiken. Bijvoorbeeld,

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

Pijlfunctie met beloften en terugbelopdrachten

Pijlfuncties bieden een betere syntaxis om beloften en callbacks te schrijven. Bijvoorbeeld,

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

kan worden geschreven als

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

Dingen die u moet vermijden met pijlfuncties

1. U mag geen pijlfuncties gebruiken om methoden binnen objecten te maken.

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

2. U kunt een pijlfunctie niet als constructor gebruiken . Bijvoorbeeld,

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

Opmerking : er zijn pijlfuncties geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik van pijlfuncties mogelijk niet. Bezoek JavaScript Arrow Function-ondersteuning voor meer informatie.