Pilefunktioner blev introduceret i ES6.
Pilefunktioner giver os mulighed for at skrive kortere funktionssyntaks:
let myFunction = (a, b) => a * b;Prøv det selv →
<!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!";
}Prøv det selv →
<!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!";
}Prøv det selv →
<!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 bliver kortere! Hvis funktionen kun har én sætning, og sætningen returnerer en værdi, kan du fjerne parenteserne og retur søgeord:
hello = () => "Hello World!";Prøv det selv →
<!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>
Bemærk: Dette virker kun, hvis funktionen kun har én udmelding.
Hvis du har parametre, sender du dem inden for parentesen:
hello = (val) => "Hello " + val;Prøv det selv →
<!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>
Faktisk, hvis du kun har én parameter, kan du også springe parenteserne over:
hello = val => "Hello " + val;Prøv det selv →
<!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>
dette?Håndteringen af dette er også anderledes i pilefunktioner sammenlignet med almindelige funktioner.
Kort sagt, med pilefunktioner er der ingen binding af dette.
I almindelige funktioner repræsenterede dette nøgleordet det objekt, der kaldte funktion, som kunne være vinduet, dokumentet, en knap eller hvad som helst.
Med pilefunktioner repræsenterer dette søgeordet altid indvende det defineret pilefunktionen.
Lad os tage et kig på to eksempler for at forstå forskellen.
Begge eksempler kalder en metode to gange, først når siden indlæses og igen når brugeren klikker på en knap.
Det første eksempel bruger en almindelig funktion, og det andet eksempel bruger en pile funktion.
Resultatet viser, at det første eksempel returnerer to forskellige objekter (vindue og knap), og andet eksempel returnerer vinduesobjektet to gange, fordi vinduesobjektet er "ejer" af funktionen.
Med en almindelig funktion repræsenterer dette objekt, der kalder 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);Prøv det selv →
<!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 pilefunktion repræsenterer dette ejer af 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);Prøv det selv →
<!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>
Husk disse forskelle, når du arbejder med funktioner. Nogle gange opførsel af almindelige funktioner er, hvad du ønsker, hvis ikke, brug pile funktioner.
Følgende tabel definerer de første browserversioner med fuld understøttelse af Pilefunktioner i JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |