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>
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>
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:
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:
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å:
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>
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.
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>
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.
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 |