JavaScript-pilfunksjon

I denne opplæringen vil du lære om JavaScript-pilfunksjon ved hjelp av eksempler.

Pilfunksjon er en av funksjonene som er introdusert i ES6-versjonen av JavaScript. Det lar deg lage funksjoner på en renere måte sammenlignet med vanlige funksjoner. For eksempel
Denne funksjonen

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

kan skrives som

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

ved hjelp av en pilfunksjon.

Syntaks for pilfunksjon

Syntaksen til pilfunksjonen er:

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

Her,

  • myFunction er navnet på funksjonen
  • arg1, arg2,… argN er funksjonsargumentene
  • statement(s) er funksjonskroppen

Hvis kroppen har ett utsagn eller uttrykk, kan du skrive pilfunksjon som:

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

Eksempel 1: Pilefunksjon uten argument

Hvis en funksjon ikke tar noe argument, bør du bruke tomme parenteser. For eksempel,

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

Eksempel 2: Pilfunksjon med ett argument

Hvis en funksjon bare har ett argument, kan du utelate parentesene. For eksempel,

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

Eksempel 3: Pilfunksjon som uttrykk

Du kan også lage en funksjon dynamisk og bruke den som et uttrykk. For eksempel,

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

Eksempel 4: Funksjoner for flere linjer

Hvis et funksjonsorgan har flere utsagn, må du sette dem i krøllete parenteser (). For eksempel,

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

dette med pilfunksjon

Inne i en vanlig funksjon refererer dette nøkkelordet til funksjonen der det heter.

Imidlertid thiser ikke assosiert med pilfunksjoner. Pilfunksjonen har ikke sin egen this. Så når du ringer this, refererer det til foreldrenes omfang. For eksempel,

Inne i en vanlig funksjon

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

Produksjon

 25 udefinert vindu ()

Her er this.ageinnsiden this.sayName()tilgjengelig fordi this.sayName()metoden til et objekt er.

Imidlertid innerFunc()er det en normal funksjon og this.ageer ikke tilgjengelig fordi det thisrefererer til det globale objektet (Window-objekt i nettleseren). Derfor, this.ageinne i innerFunc()funksjonen gir undefined.

Inne i en pilfunksjon

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

Produksjon

 25 25

Her innerFunc()defineres funksjonen ved hjelp av pilfunksjonen. Og inne i pilfunksjonen, thisrefererer til foreldrenes omfang. Derfor this.agegir 25 .

Argumenter bindende

Vanlige funksjoner har bindende argumenter. Derfor når du overfører argumenter til en vanlig funksjon, kan du få tilgang til dem ved hjelp av argumentsnøkkelordet. For eksempel,

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

Pilfunksjoner har ikke bindende argumenter.

Når du prøver å få tilgang til et argument ved hjelp av pilfunksjonen, vil det gi en feil. For eksempel,

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

For å løse dette problemet kan du bruke spredningssyntaks. For eksempel,

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

Pilfunksjon med løfter og tilbakekallinger

Pilfunksjoner gir bedre syntaks for å skrive løfter og tilbakeringinger. 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 unngå med pilfunksjoner

1. Du bør ikke bruke pilfunksjoner til å lage metoder inne 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 bruke en pilfunksjon som konstruktør . For eksempel,

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

Merk : Pilfunksjoner ble introdusert i ES6 . Noen nettlesere støtter kanskje ikke bruk av pilfunksjoner. Gå til JavaScript Arrow Function support for å lære mer.

Interessante artikler...