JavaScript pilfunktion


Innehållsförteckning

    Visa innehållsförteckning

Pilfunktioner introducerades i ES6.

Pilfunktioner låter oss skriva kortare funktionssyntax:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>

</body>
</html>

Före pilen:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Med pilfunktion:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Det blir kortare! Om funktionen bara har en sats, och satsen returnerar ett värde kan du ta bort parenteserna och retur sökord:

Pilfunktioner Returvärde som standard:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function without the brackets or the return keyword.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Obs! Detta fungerar bara om funktionen bara har en påstående.

Om du har parametrar skickar du dem inom parentesen:

Pilfunktion med parametrar:

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function with a parameter.</p>

<p id="demo"></p>

<script>
let hello = "";

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

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>

Faktum är att om du bara har en parameter kan du hoppa över parenteserna också:

Pilfunktion utan parentes:

hello = val => "Hello " + val;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>


Vad sägs om det här?

Hanteringen av detta skiljer sig också i pilfunktioner jämfört med vanliga funktioner.

Kort sagt, med pilfunktioner finns det ingen bindning av detta.

I vanliga funktioner representerade nyckelordet detta objektet som anropade funktion, som kan vara fönstret, dokumentet, en knapp eller vad som helst.

Med pilfunktioner representerar detta nyckelordet alltid invända mot det definierade pilfunktionen.

Låt oss ta en titt på två exempel för att förstå skillnaden.

Båda exemplen anropar en metod två gånger, först när sidan laddas och en gång till när användaren klickar på en knapp.

Det första exemplet använder en vanlig funktion och det andra exemplet använder en pilfunktion.

Resultatet visar att det första exemplet returnerar två olika objekt (fönster och knapp), och den andra exemplet returnerar fönsterobjektet två gånger, eftersom fönsterobjektet är "ägare" av funktionen.

Exempel

Med en vanlig funktion representerar detta objekt som anropar funktionen:

 // Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML 
  += this;
}
// The window object calls the function:
  window.addEventListener("load", hello);
// A button object calls the 
  function:
document.getElementById("btn").addEventListener("click", hello);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>

<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let hello = "";

hello = function() {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>

</body>
</html>

Exempel

Med en pilfunktion representerar detta ägare av funktionen:

 // Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML 
  += this;
}
// The window object calls the function:
  window.addEventListener("load", hello);
// A button object calls the 
  function:
document.getElementById("btn").addEventListener("click", hello);

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>

<p>Click the button to execute the "hello" function again, and you will see that "this" still  represents the window object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let hello = "";

hello = () => {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>

</body>
</html>

Kom ihåg dessa skillnader när du arbetar med funktioner. Ibland beteendet hos vanliga funktioner är vad du vill, om inte, använd pilfunktioner.


Webbläsarstöd

Följande tabell definierar de första webbläsarversionerna med fullt stöd för Pilfunktioner i JavaScript:

Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Sep, 2015 Jul, 2015 May, 2013 Sep, 2016 Sep, 2015