Pfeilfunktionen vs. Reguläre Funktionen in JavaScript

Wie fast jede moderne Programmiersprache bietet JavaScript Möglichkeiten, Funktionen zu erstellen, um die Wiederverwendbarkeit von Code zu ermöglichen. Für diejenigen, die mit der Sprache nicht vertraut sind, gibt es zwei verschiedene Möglichkeiten, eine Funktion in JavaScript zu deklarieren.

Ursprünglich die Funktion Schlüsselwort wurde verwendet, und später wurde die Pfeilsyntax erstellt. Obwohl sich der Bereichszugriff unterscheidet, führen sowohl das Funktionsschlüsselwort als auch die Pfeilsyntax zu ähnlichen Ergebnissen.

Die Unfähigkeit, zwischen den beiden zu unterscheiden, kann Probleme verursachen und zu einer falschen Verwendung führen. Der moderne JS-Entwickler muss unbedingt verstehen, wie sich jede Funktionsdeklaration auf Umfang und Sichtbarkeit auswirkt.

Was sind die Pfeilfunktionen von JavaScript?

Die Pfeilfunktionen von JavaScript sind eine alternative Möglichkeit, Funktionen zu definieren, die nicht den Standardwert verwenden Funktion Stichwort:

FunktionlogNachricht(Nachricht) {
Konsole.log (Nachricht);
}
konst logMessage = (Nachricht) => {
Konsole.log (Nachricht);
}
konst logMessage = Nachricht =>Konsole.log (Nachricht);

Oben sehen Sie dieselbe Nachricht auf drei verschiedene Arten geschrieben. Die erste verwendet die reguläre Funktionsdeklarationsmethode. Die nächsten beiden zeigen die zwei Möglichkeiten, die Pfeilfunktionen von ES6 zu verwenden.

JavaScript hat die Pfeilfunktionssyntax erstmals mit der Veröffentlichung der ECMAScript 2015-Standards übernommen. Pfeilfunktionen boten eine saubere und prägnante Methode zum schnellen Erstellen von Funktionen und eine interessante Lösung für mehrere lang andauernde Bereichsprobleme in JavaScript.

Diese Features machten Pfeilfunktionen bei vielen Entwicklern schnell zum Renner. Programmierer, die sich mit einer modernen JavaScript-Codebasis befassen, werden genauso wahrscheinlich Pfeilfunktionen wie reguläre Funktionen finden.

Wie unterscheiden sich Pfeilfunktionen von regulären Funktionen in JavaScript?

Auf den ersten Blick scheinen sich Pfeilfunktionen nicht wesentlich von Funktionen zu unterscheiden, die mit dem Schlüsselwort function deklariert wurden. Außerhalb der Syntax kapseln beide einen wiederverwendbaren Satz von Aktionen, die an anderer Stelle im Code aufgerufen werden können.

Trotz der Ähnlichkeiten zwischen den beiden gibt es jedoch einige Unterschiede, die Entwickler beachten müssen.

Unterschied im Umfang

Immer wenn eine reguläre Funktion in JavaScript deklariert wird, ist das Funktion fungiert als Abschluss, der seinen eigenen Gültigkeitsbereich erstellt. Dies kann zu Problemen führen, wenn bestimmte Spezialfunktionen wie z setTimeout Und setIntervall.

Vor ES6 gab es eine beträchtliche Anzahl von Problemumgehungen, die Elemente für die Verwendung in Rückrufen auf höhere Ebenen des Bereichs heben würden. Diese Hacks funktionierten, waren aber oft schwer zu verstehen und konnten Probleme mit dem Überschreiben bestimmter Variablen verursachen.

Pfeilfunktionen lösten beide Probleme auf einfache und elegante Weise. Wenn eine Pfeilfunktion als Teil eines Rückrufs verwendet wird, hat sie Zugriff auf denselben Bereich wie die Funktion, von der sie aufgerufen wurde.

Dadurch konnten Funktionen als Rückrufe verwendet werden, ohne den Zugriff auf den Kontext zu verlieren, in dem das ursprüngliche Ereignis aufgerufen wurde. Als einfachen Test, um dieses Prinzip in Aktion zu zeigen, können Sie eine verzögerte Nachrichtenfunktion wie die folgende einrichten:

Funktionverzögerte Nachricht(Nachricht, Verzögerung) {

 setTimeout(Funktion(Nachricht) {
Konsole.log (Nachricht);
 }, Verzögerung);
}
verzögerte Nachricht ("Hallo Welt", 1000);

Die Funktion ist einfach, akzeptierend Nachricht Und Verzögerung in Millisekunden. Nachdem die Verzögerung verstrichen ist, sollte die Nachricht in der Konsole protokolliert werden. Wenn der Code jedoch ausgeführt wird, nicht definiert wird anstelle der übergebenen Nachricht in der Konsole protokolliert.

Wenn die Callback-Funktion ausgeführt wird, ändert sich der Geltungsbereich und die ursprüngliche Nachricht ist nicht mehr zugänglich. Die Verwendung der Nachricht innerhalb der Closure erfordert, dass die Nachricht in eine globale Variable hochgezogen wird, was dazu führen kann, dass sie vor dem Callback überschrieben wird.

Eine Pfeilfunktion ist eine geeignete Lösung für dieses Problem. Wenn Sie das erste Argument für ersetzen setTimeout, kann der Bereich beibehalten werden und die Funktion hat Zugriff auf die Nachricht, an die sie übergeben wird verzögerte Nachricht.

Funktionverzögerte Nachricht(Nachricht, Verzögerung) {

 setTimeout(() => {
Konsole.log (Nachricht);
 }, Verzögerung);
}
verzögerte Nachricht ("Hallo Welt", 1000);

Jetzt, bei der Hinrichtung, die verzögerte Nachricht Die Funktion protokolliert die Nachricht. Darüber hinaus können mehrere Nachrichten mit unterschiedlichen Verzögerungen in die Warteschlange gestellt werden, und sie werden alle immer noch zur richtigen Zeit angezeigt.

Dies liegt daran, dass jedes Mal verzögerte Nachricht verwendet wird, generiert es einen eigenen Gültigkeitsbereich mit einer eigenen Kopie der internen Pfeilfunktion.

Code-Lesbarkeit

Während Pfeilfunktionen als Callbacks nützlich sind, werden sie auch verwendet, um den Code sauber und prägnant zu halten. Im obigen Abschnitt können Sie sehen, dass die Verwendung einer Pfeilfunktion deutlich macht, was passieren wird, wenn die verzögerte Nachricht Funktion aufgerufen wird.

Da die Funktionen immer komplexer werden, kann ein wenig Klarheit den Code viel besser lesbar machen. Beim Zusammenstellen von Objekten kann dies den Code vereinfachen, wenn kurze Funktionen hinzugefügt werden:

KlasseSchalter{
 _count = 0;
 inkrement = () => {
Das._count += 1;
 }
 dekrementieren = () => {
Das._count -= 1;
 }
 zählen = () => {
zurückkehrenDas._zählen;
 }
}
lassen kt = neu Schalter();

Rolle in der objektorientierten Programmierung

Während die Pfeilfunktionen von JavaScript ein integraler Bestandteil der funktionalen Programmierung sind, haben sie auch einen Platz darin Objekt orientierte Programmierung. Pfeilfunktionen können innerhalb von Klassendeklarationen verwendet werden:

KlasseorderLineItem{
 _LineItemID = 0;
 _Produkt = {};
 _Menge = 1;
Konstrukteur(Produkt) {
Das._LineItemID = crypto.randomUUID();
Das._Produkt = Produkt
 }
 changeLineItemQuantity = (neuMenge) => {
Das._Menge = neueMenge;
 }
}

Die Verwendung einer Pfeilfunktion zum Deklarieren von Methoden innerhalb einer Klassendeklaration ändert das Verhalten der Funktion innerhalb der Klasse nicht. Außerhalb der Klasse wird die Funktion jedoch verfügbar gemacht, sodass sie von anderen Klassen verwendet werden kann.

Auf normale Funktionen kann außerhalb der Klassendeklaration nicht zugegriffen werden, ohne dass sie aufgerufen werden. Dies bedeutet, dass andere Klassendeklarationen diese Funktionen zwar erben können, aber nicht direkt auf sie zugegriffen werden kann, um andere Klassen zu erstellen.

Wann sollten Sie die Pfeilfunktionen von JavaScript verwenden?

Die Pfeilfunktionen von JavaScript sind ein unglaublich leistungsfähiges Feature, das Entwicklern weitaus mehr Kontrolle darüber gibt, auf welchen Bereich eine Funktion zugreifen kann. Zu wissen, wann ein Callback Zugriff auf den Gültigkeitsbereich seines übergeordneten Elements haben sollte und wann nicht, kann einem Entwickler dabei helfen, zu bestimmen, welche Art von Deklaration zu verwenden ist.

Pfeilfunktionen geben Programmierern eine klare und prägnante Möglichkeit, Rückrufe zu schreiben, ohne Teile des Bereichs offenzulegen, die verborgen werden sollten. Sie ermöglichen auch die Erstellung sauberer und einfacher Kompositionen, was die funktionale Programmierung in JavaScript weiter ermöglicht.

JS-Entwickler müssen sich der Unterschiede zwischen den beiden Syntaxen bewusst sein und bei der Deklaration ihrer Funktionen darauf achten, welche Syntax angemessen ist.