JavaScript Arrow Functions

Arrow functions blev introduceret i ES6.

Pfeilfunktioner giver os mulighed for at skrive kortere funktioner:

Syntaks

let myFunction = (a, b) => a * b;

Prøv det selv

Før:

hello = function() {
  return "Hello World!";
}

Prøv det selv

Efter brug af pfeilfunktioner:

hello = () => {
  return "Hello World!";
}

Prøv det selv

Det er faktisk blevet kortere! Hvis funktionen kun har én sætning, og denne sætning returnerer en værdi, kan du undlade parenteser og return Nøgleordet:

Standardreturnværdi for pfeilfunktioner:

hello = () => "Hello World!";

Prøv det selv

Kommentar:Dette gælder kun, hvis funktionen kun har én sætning.

Hvis du har parametre, skal du passere dem ind i parenteserne:

Pfeilfunktioner med parametre:

hello = (val) => "Hello " + val;

Prøv det selv

Faktisk kan du også undlade parenteser, hvis der kun er én parameter:

Pfeilfunktioner uden parenteser:

hello = val => "Hello " + val;

Prøv det selv

this what should I do?

Compared to regular functions, arrow functions handle this behandling er også forskellig.

Kort sagt, brug af pfeilfunktioner har ingen indflydelse på this bindning.

I almindelige funktioner, nøgleordet this er objektet, der kalder funktionen, kan være vindue, dokument, knap eller noget andet.

For pfeilfunktioner,this Nøgleordet symboliserer altid objektet, der definerer pfeilfunktionen.

Lad os se på to eksempler for at forstå forskellen.

Disse to eksempler kaldte metoderne to gange, første gang ved sideindlæsning og anden gang, når brugeren klikker på knappen.

Den første eksempel bruger almindelige funktioner, og den anden eksempel bruger pfeilfunktioner.

Resultatet viser, at den første eksempel returnerer to forskellige objekter (window og button), mens den anden eksempel returnerer to gange window-objektet, fordi window-objektet er funktionens 'ejer'.

eksempel

For almindelige funktioner, refererer this til objektet, der kalder funktionen:

// Almindelige funktioner:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// window-objektet kalder funktionen:
window.addEventListener("load", hello);
// button-objektet kalder funktionen:
document.getElementById("btn").addEventListener("click", hello);

Prøv det selv

eksempel

brugte pfeilfunktioner, så this Repræsenterer funktionens ejer:

// Pilefunktion:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// window-objektet kalder funktionen:
window.addEventListener("load", hello);
// button-objektet kalder funktionen:
document.getElementById("btn").addEventListener("click", hello);

Prøv det selv

Husk disse forskelle, når du bruger funktioner. Nogle gange er opførslen af almindelige funktioner præcis, hvad du ønsker, og i så fald skal du bruge pilefunktioner.

Browser-understøttelse

Følgende tabel viser den første browserversion, der fuldt ud understøtter JavaScript-pilefunktioner:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
September 2015 Juli 2015 Maj 2013 September 2016 September 2015