Pfeilfunktionen wurden in ES6 eingeführt.
Mit Pfeilfunktionen können wir eine kürzere Funktionssyntax schreiben:
let myFunction = (a, b) => a * b;
Probieren Sie es selbst aus →
<!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!";
}
Probieren Sie es selbst aus →
<!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!";
}
Probieren Sie es selbst aus →
<!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>
Es wird kürzer! Wenn die Funktion nur eine Anweisung hat, und die Anweisung Gibt einen Wert zurück, Sie können die Klammern und entfernen return
Schlüsselwort:
hello = () => "Hello World!";
Probieren Sie es selbst aus →
<!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>
Hinweis: Dies funktioniert nur, wenn die Funktion nur eine hat Stellungnahme.
Wenn Sie Parameter haben, übergeben Sie diese in Klammern:
hello = (val) => "Hello " + val;
Probieren Sie es selbst aus →
<!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>
Wenn Sie nur einen Parameter haben, können Sie die Klammern sogar überspringen:
hello = val => "Hello " + val;
Probieren Sie es selbst aus →
<!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>
diesem
?Auch die Handhabung von this
unterscheidet sich bei Pfeilfunktionen im Vergleich zu regulären Funktionen.
Kurz gesagt, bei Pfeilfunktionen gibt es keine Bindung von dieses
.
In regulären Funktionen stellte das Schlüsselwort this
das Objekt dar, das die aufgerufen hat Funktion, die das Fenster, das Dokument, eine Schaltfläche oder was auch immer sein kann.
Bei Pfeilfunktionen stellt das Schlüsselwort this
immer das dar widerspreche dem definierte die Pfeilfunktion.
Schauen wir uns zwei Beispiele an, um den Unterschied zu verstehen.
In beiden Beispielen wird eine Methode zweimal aufgerufen, zuerst beim Laden der Seite und dann noch einmal wenn der Benutzer auf eine Schaltfläche klickt.
Das erste Beispiel verwendet eine reguläre Funktion und das zweite Beispiel verwendet eine Pfeilfunktion.
Das Ergebnis zeigt, dass das erste Beispiel zwei verschiedene Objekte (Fenster und Schaltfläche) zurückgibt. und das Das zweite Beispiel gibt das Fensterobjekt zweimal zurück, da das Fensterobjekt das ist „Eigentümer“ der Funktion.
Mit einer regulären Funktion stellt this
die dar Objekt, das die Funktion aufruft:
// 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);
Probieren Sie es selbst aus →
<!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>
Mit einer Pfeilfunktion stellt dies
das dar Eigentümer der Funktion:
// 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);
Probieren Sie es selbst aus →
<!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>
Beachten Sie diese Unterschiede, wenn Sie mit Funktionen arbeiten. Manchmal die Das Verhalten regulärer Funktionen ist das, was Sie wollen. Wenn nicht, verwenden Sie Pfeilfunktionen.
Die folgende Tabelle definiert die ersten Browserversionen mit vollständiger Unterstützung für Pfeilfunktionen in JavaScript:
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |