JavaScript-Pfeilfunktion


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

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>

Vor dem Pfeil:

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>

Mit Pfeilfunktion:

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:

Standardmäßiger Rückgabewert von Pfeilfunktionen:

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:

Pfeilfunktion mit Parametern:

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:

Pfeilfunktion ohne 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 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>


Was ist mit 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.

Beispiel

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>

Beispiel

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.


Browser-Unterstützung

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