Warum Sie bei der Verwendung von Pfeilfunktionen in JavaScript vorsichtig sein sollten

Die Pfeilfunktionssyntax wurde mit der Veröffentlichung von ECMAScript 2015, auch bekannt als ES6, eingeführt. Heute sind Pfeilfunktionen die Lieblingsfunktion vieler JavaScript-Programmierer. Diese Vorliebe für Pfeilfunktionen ist auf die prägnante Syntax und das unkomplizierte Verhalten des Schlüsselworts „this“ zurückzuführen.

Pfeilfunktionen haben jedoch einige Nachteile. Erfahren Sie mehr über die wichtigsten Unterschiede zwischen Pfeilfunktionen und regulären Funktionen und finden Sie heraus, warum es in den meisten Fällen besser ist, bei regulären Funktionen zu bleiben.

1. Sie müssen eine Pfeilfunktion definieren, bevor Sie sie verwenden können

Sie können keine Pfeilfunktion aktivieren. Die Standard-Heberegeln von JavaScript ermöglichen es Ihnen, eine Funktion aufzurufen, bevor Sie sie definieren, aber das ist bei Pfeilfunktionen nicht der Fall. Wenn Sie eine JavaScript-Datei mit Funktionen haben, bedeutet dies, dass sich der gesamte wichtige Code am Ende der Datei befindet.

Betrachten Sie zum Beispiel den folgenden JavaScript-Code:

const doubleNumbers = (Zahlen) { 
 zahlen.map(N => N * 2)
}
const halveNumbers = (Zahlen) { 
 zahlen.map(N => N / 2)
}
const sumNumbers = (Zahlen) { 
 zahlen.reduce((Summe, n) => { 
zurückkehren Summe + n; 
 }, 0)
}
const Zahlen = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers (Zahlen)
Konsole.log (halveNumbers (verdoppelt))
Konsole.log (sumNumbers (Zahlen))

Im obigen Codeblock befindet sich der wichtige Code unten. Die Hilfsfunktionen werden alle vor dem Ausführungspunkt definiert. Müssen Erstellen Sie Ihre JavaScript-Funktionen am Anfang der Datei kann unpraktisch sein, da Sie nach unten scrollen müssen, um den eigentlichen Code zu sehen, der die Arbeit erledigt.

Wenn Sie die Hilfsfunktionen nach unten und den eigentlichen Code nach oben verschoben haben, erhalten Sie einen Referenzfehler. Die Laufzeit behandelt die Funktion als Variable. Daher müssen Sie es zuerst definieren, bevor Sie darauf zugreifen oder es aufrufen können. Wenn Sie jedoch alle Pfeilfunktionen in reguläre Funktionen umgewandelt haben (mit dem Funktion Schlüsselwort), dann würde Ihr Code gut funktionieren. Gleichzeitig bleibt der wichtige Code oben, wo Sie ihn finden können.

Dies ist eines der größten Probleme bei der Verwendung von Pfeilfunktionen. Sie zeigen kein Hosting-Verhalten. Mit anderen Worten: Sie müssen sie definieren, bevor Sie sie tatsächlich verwenden. Andererseits können Sie reguläre Funktionen hochfahren.

2. Pfeilfunktionen könnten für manche Menschen verwirrend sein

Ein weiterer Grund, reguläre Funktionen anstelle von Pfeilfunktionen zu verwenden, ist die Lesbarkeit. Reguläre Funktionen sind einfacher zu lesen, da sie explizit verwenden Funktion Stichwort. Dieses Schlüsselwort gibt an, dass es sich bei dem betreffenden Code um eine Funktion handelt.

Andererseits weisen Sie Variablen Pfeilfunktionen zu. Als Neuling könnte dies Sie verwirren und denken, der Code sei eine Variable und keine Funktion.

Vergleichen Sie die beiden folgenden Funktionen:

const halveNumbers = (Zahlen) => {
zurückkehren zahlen.map(N => N / 2)
}
FunktionhalbierenZahlen(Zahlen) { 
zurückkehren zahlen.map(N => N / 2)
}

Auf den ersten Blick können Sie leicht erkennen, dass es sich beim zweiten Codeabschnitt um eine Funktion handelt. Die Syntax macht deutlich, dass es sich bei dem Code um eine Funktion handelt. Die erste ist jedoch mehrdeutig – Sie können möglicherweise nicht leicht erkennen, ob es sich um eine Variable oder eine Funktion handelt.

3. Sie können Pfeilfunktionen nicht als Methoden verwenden

Wenn Sie eine Pfeilfunktion verwenden, wird die Das Das Schlüsselwort entspricht dem, was sich außerhalb des Dings befindet, in dem wir uns befinden. In den meisten Fällen ist es das Fensterobjekt.

Betrachten Sie das folgende Objekt:

const Person = {
 Vorname: "Kyle",
 Familienname, Nachname: "Kochen",
 printName: () => {
Konsole.Protokoll(`${Das.Vorname}``${Das.Familienname, Nachname}` )
 }
}
person.printName()

Wenn Sie den Code ausführen, werden Sie feststellen, dass der Browser druckt nicht definiert sowohl für den Vornamen als auch für den Nachnamen. Da wir eine Pfeilfunktion verwenden, Das Das Schlüsselwort entspricht dem Fensterobjekt. Außerdem gibt es keine Vorname oder Familienname, Nachname dort definierte Eigenschaft.

Um dieses Problem zu lösen, müssen Sie stattdessen eine reguläre Funktion verwenden:

const Person = {
 Vorname: "Kyle",
 Familienname, Nachname: "Kochen",
 printName: Funktion() {
Konsole.Protokoll(`${Das.Vorname}``${Das.Familienname, Nachname}` )
 }
}
person.printName()

Das wird gut funktionieren, weil Das bezieht sich auf Person Objekt. Wenn Sie diese Art der objektorientierten Programmierung häufig durchführen, müssen Sie sicherstellen, dass Sie reguläre Funktionen verwenden. Pfeilfunktionen funktionieren nicht.

Wann sollten Pfeilfunktionen verwendet werden?

Verwenden Sie Pfeilfunktionen hauptsächlich dort, wo Sie eine anonyme Funktion benötigen. Ein Beispiel für ein solches Szenario ist der Umgang mit einer Callback-Funktion. Es ist besser, beim Schreiben eines Rückrufs eine Pfeilfunktion zu verwenden, da die Syntax viel einfacher ist als das Schreiben einer vollständigen Funktion.

Vergleichen Sie diese beiden und entscheiden Sie, was einfacher ist:

FunktionhalbierenZahlen(Zahlen) {
zurückkehren zahlen.map(N => N / 2)
}
FunktionhalbierenZahlen(Zahlen) {
zurückkehren zahlen.map(Funktion(N) {
zurückkehren N / 2
 })
}

In beiden Fällen wird eine Callback-Funktion an die Methode map() übergeben. Aber der erste Rückruf ist eine Pfeilfunktion, während der zweite eine vollständige Funktion ist. Sie können sehen, dass die erste Funktion weniger Codezeilen benötigt als die zweite Funktion: drei vs. fünf.

Die andere Gelegenheit, Pfeilfunktionen zu verwenden, ist immer dann, wenn Sie sich mit einer bestimmten „dies“-Syntax befassen möchten. Das Objekt „dieses“ ändert sich je nachdem, ob Sie für bestimmte Dinge reguläre Funktionen oder Pfeilfunktionen verwenden.

Der folgende Codeblock registriert zwei „Click“-Ereignis-Listener für das Dokumentobjekt. Die erste Instanz verwendet eine reguläre Funktion als Rückruf, während die zweite eine Pfeilfunktion verwendet. In beiden Rückrufen protokolliert der Code das Ausführungsobjekt (this) und das Ereignisziel:

dokumentieren.addEventListener("klicken", Funktion(e) {
Konsole.Protokoll("FUNKTION", Das, e.target)
})
dokumentieren.addEventListener("klicken", (e) => {
Konsole.Protokoll("PFEIL", Das, e.target)
})

Wenn Sie dieses Skript ausführen, werden Sie feststellen, dass „diese“ Referenz für beide unterschiedlich ist. Für die reguläre Funktion verweist diese Eigenschaft auf das Dokument, das mit dem identisch ist e.target Eigentum. Bei der Pfeilfunktion verweist dies jedoch auf das Fensterobjekt.

Wenn Sie eine reguläre Funktion als Callback verwenden, verweist diese auf das Element, bei dem wir das Ereignis auslösen. Wenn Sie jedoch eine Pfeilfunktion verwenden, wird dieses Schlüsselwort standardmäßig auf das Fensterobjekt gesetzt.

Erfahren Sie mehr über Pfeilfunktionen im Vergleich zu regulären Funktionen

Es gibt noch einige weitere subtile Unterschiede zwischen regulären Funktionen und Pfeilfunktionen. Die Beherrschung beider Funktionstypen ist eine Grundvoraussetzung für die Beherrschung von JavaScript. Erfahren Sie, wann Sie das eine und wann das andere verwenden sollten. Anschließend verstehen Sie die Auswirkungen der Verwendung einer regulären Funktion oder einer Pfeilfunktion in Ihrem JavaScript.