JavaScript Långa funktioner

Pilarfunktioner introducerades i ES6.

Pilarfunktioner låter oss skriva kortare funktioner:

Syntaks

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

Prova själv

Tidigare:

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

Prova själv

Efter att ha använt pilarfunktioner:

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

Prova själv

verkligen kortare! Om funktionen endast har ett stycke och detta stycke returnerar ett värde, kan du ta bort parenteserna och return Nyckelordet:

Standardåtervärd för pilarfunktioner:

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

Prova själv

Kommentar:Detta gäller endast om funktionen endast har ett stycke.

Om du har argument, överför dem till parenteserna:

Pilarfunktioner med argument:

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

Prova själv

Faktiskt, om det bara finns ett argument, kan du också hoppa över parenteserna:

Pilarfunktioner utan parenteser:

hello = val => "Hello " + val;

Prova själv

this vad göra?

jämfört med vanliga funktioner, påverkar pilarfunktioner this på ett annat sätt.

För att sammanfatta, att använda pilarfunktioner påverkar behandlingen av this bindning.

I vanliga funktioner betyder nyckelordet this det objekt som anropar funktionen, kan vara fönster, dokument, knapp eller något annat.

För pilarfunktioner,this Nyckelordet representerar alltid det objekt som definierar pilarfunktionen.

Låt oss se på två exempel för att förstå skillnaderna.

Båda dessa exempel anropar metoden två gånger, första gången vid sidans laddning, och andra gången när användaren klickar på knappen.

Den första exempel använder vanliga funktioner, medan den andra exempel använder pilarfunktioner.

Resultatet visar att den första exempel returnerar två olika objekt (window och button), medan den andra exempel returnerar två gånger window-objektet, eftersom window-objektet är funktionens "ägare".

exempel

För vanliga funktioner betyder this det objekt som anropar funktionen:

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

Prova själv

exempel

användde pilarfunktioner, då this Visar funktionens ägare:

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

Prova själv

Kom ihåg dessa skillnader när du använder funktioner. Ibland är beteendet för vanliga funktioner precis vad du vill ha, om inte, använd pilfunktioner.

Webbläsarstöd

Nedanstående tabell anger den första webbläsarversionen som helt stöder JavaScript-pilfunktioner:

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