6 Unterschiede zwischen Pfeilfunktionen und regulären Funktionen in JavaScript

Funktionen sind ein wesentlicher Bestandteil von JavaScript, den Sie zum Schreiben von wiederverwendbarem Code verwenden müssen. Die beiden Haupttypen von Funktionen sind reguläre Funktionen und Pfeilfunktionen, und es gibt viele Möglichkeiten, sie zu definieren.

Obwohl sie ähnliche Anforderungen erfüllen, weisen sie einige entscheidende Unterschiede auf, die sich grundlegend darauf auswirken können, wie Sie sie in Ihrem Code verwenden. Erfahren Sie alles über verschiedene Unterschiede zwischen Pfeilfunktionen und regulären Funktionen.

1. Syntaxunterschiede

Die Syntax, die Sie bei der Entwicklung von JavaScript-Funktionen wählen, hat großen Einfluss darauf, wie einfach es ist, Ihren Code zu lesen und zu verstehen. Die Syntax von regulären Funktionen und Pfeilfunktionen unterscheidet sich erheblich und hat Auswirkungen darauf, wie Sie sie schreiben und verwenden.

JavaScript-Pfeilfunktionen

Verwenden Sie eine kleinere Sprachstruktur, die verständlicher ist. Sie können sie zum Erstellen von Funktionen verwenden, indem Sie sie in einem einzigen Ausdruck oder einer einzigen Anweisung kombinieren.

const hinzufügen = (a, b) => a + b;

In diesem Beispiel ist die hinzufügen Funktion akzeptiert zwei Eingaben, A Und B, und gibt deren Gesamtsumme zurück. Der => sign definiert dies als Pfeilfunktion.

Andererseits erfordert die Definition einer regulären Funktion die Verwendung von Funktion Schlüsselwort, mit einer ausführlicheren Syntax, wie in diesem Beispiel gezeigt:

Funktionhinzufügen(a, b) {
zurückkehren a + b;
}

In diesem Beispiel ist die Funktion Das Schlüsselwort definiert eine reguläre Funktion, die auch geschweifte Klammern verwendet zurückkehren Stellungnahme.

Reguläre Funktionen sind nützlicher für komplexe Syntax, die mehrere Anweisungen oder Ausdrücke erfordert. Im Gegensatz dazu verwenden Pfeilfunktionen eine prägnantere Syntax, die das Lesen und Verstehen Ihres Codes erleichtern kann.

2. Unterschiede im Umfang

Der Begriff „Scoping“ beschreibt, wie auf die internen Variablen und Funktionen einer Funktion zugegriffen werden kann. In JavaScript definieren Sie mithilfe von Scoping Variablen und Funktionen im gesamten Code und greifen darauf zu. Ihr Unterschied Der Umfang kann erhebliche Auswirkungen darauf haben, wie Sie JavaScript schreiben und verwenden Pfeil und reguläre Funktionen.

Wie Pfeilfunktionen beim Scoping damit umgehen Das Das Schlüsselwort unterscheidet sich erheblich von der Funktionsweise normaler Funktionen. Reguläre Funktionen definieren die Das sich selbst verschlagworten; Daher kann sie sich abhängig vom Kontext, in dem Sie die Funktion aufrufen, ändern.

Andererseits, weil sie das nicht spezifizieren Das Schlüsselwort, Pfeilfunktionen verwenden dasselbe Das als der sie umgebende statische Bereich.

Um den Unterschied zu sehen, sehen Sie sich das folgende Beispiel an. Nehmen wir an, Sie haben eine Person Objekt mit a Name Eigenschaft und eine Methode namens sayName() das den Namen der Person mit einer regulären Funktion protokolliert:

const Person = {
 Name: 'John,'
 sayName: Funktion() {
Konsole.Protokoll(Das.Name);
 }
};
person.sayName(); // protokolliert 'John'

Hier ist die reguläre Funktion sayName() eine Methode des Personenobjekts und des Das Das Schlüsselwort innerhalb dieser Funktion bezieht sich auf dieses Personenobjekt.

Versuchen wir nun dasselbe mit einer Pfeilfunktion:

const Person = {
 Name: 'John',
 sayName: () => {
Konsole.Protokoll(Das.Name);
 }
};
person.sayName(); // Protokolle undefiniert

Weil die Pfeilfunktion in der verwendet wird sayName() Methode definiert nicht ihre eigene Das Schlüsselwort, es verwendet das Das des statischen Bereichs, der es umgibt. In diesem Fall ist das der globale Geltungsbereich der Instanz.

Als Ergebnis, wenn Sie anrufen person.sayName(), du erhältst nicht definiert statt "John." Dies kann erhebliche Auswirkungen darauf haben, wie Sie Funktionen in Ihrem Code schreiben und verwenden.

3. Anwendungsfälle und Best Practices

Reguläre Funktionen eignen sich besser für Funktionen, die ihre eigenen erfordern Das Schlüsselwort, z. B. Methoden in einem Objekt.

Pfeilfunktionen sind dafür besser geeignet funktionale Programmierung und Rückrufe, die nicht erforderlich sind Das Stichwort.

4. Unterschiede bei der Funktionsbindung

Unter Funktionsbindung versteht man die Beziehung zwischen Das Schlüsselwort und Funktionen in Ihrem Code. Die Unterschiede in der Funktionsbindung zwischen Pfeilfunktionen und normalen Funktionen können sich stark darauf auswirken, wie Sie Pfeilfunktionen erstellen und verwenden.

Verwendung der Das Das Schlüsselwort macht es in regulären Funktionen eindeutig und verknüpft es mit verschiedenen Objekten basierend auf der Methode, die zum Aufrufen der Funktion verwendet wird. Die Funktionsbindung ist einer der wichtigsten Unterschiede zwischen regulären und Pfeilfunktionen.

Im Gegensatz dazu haben Pfeilfunktionen keine Das Stichwort; Vielmehr beziehen sie es aus den umliegenden Bereichen.

Schauen wir uns ein Beispiel an, um diesen Unterschied besser zu verstehen. Angenommen, Sie haben eine Person Objekt mit a Name Feld und eine Methode namens sayName() das eine reguläre Funktion verwendet, um den Namen der Person aufzuzeichnen:

const Person = {
 Name: 'John',
 sayName: Funktion() {
Konsole.Protokoll(Das.Name);
 }
};
const anotherPerson = {
 Name: „Jane“
};
person.sayName.call (anotherPerson); // protokolliert 'Jane'

In diesem Beispiel nennen Sie das Personenobjekt sayName() Methode mit dem Wert Eine andere Person Verwendung der Forderung() Methode. Aus diesem Grund ist die sayName() Methode, Das, Schlüsselwort ist an gebunden Eine andere Person Objekt, und es protokolliert „Jane" statt "John."

Lassen Sie uns nun dasselbe mit einer Pfeilfunktion verwenden:

const Person = {
 Name: 'John',
 sayName: () => {
Konsole.Protokoll(Das.Name);
 }
};
const anotherPerson = {
 Name: „Jane“
};
person.sayName.call (anotherPerson); // Protokolle undefiniert

Seit der sayName() Da die Technik kein eigenes Schlüsselwort hat, verwenden Sie in diesem Beispiel eine darin enthaltene Pfeilfunktion. In diesem Fall erbt die Pfeilfunktion die Eigenschaften des umgebenden Bereichs, also des globalen Bereichs.

Das heißt, wenn Sie laufen person.sayName.call (anotherPerson), die Pfeilfunktion Das Das Schlüsselwort bleibt das globale Objekt und nicht definiert tritt an die Stelle von Jane im Protokoll.

Wenn Sie eine Funktion an eine bestimmte binden müssen Das Wert, kann eine gewöhnliche Funktion vorzuziehen sein. Wenn Sie jedoch keine Funktion an eine bestimmte binden müssen Das Wert ist eine Pfeilfunktion möglicherweise kürzer und leichter zu verstehen.

5. Implizite Rückgabe

Pfeilfunktionen verfügen über eine implizite Rückgabefunktion. Wenn der Funktionskörper aus einem einzigen Ausdruck besteht, geben die Funktionen diesen Ausdruck zurück.

Als Beispiel:

const doppelt = (X) => X * 2;

Diese Pfeilfunktion gibt ein Double von einem Parameter zurück. Sie müssen kein explizites verwenden zurückkehren Schlüsselwort, da der Funktionskörper nur einen Ausdruck hat.

6. Kompatibilitätsunterschiede

Kompatibilitätsunterschiede beziehen sich auf die in ECMAScript 6 hinzugefügten Pfeilfunktionen, die möglicherweise nicht mit älteren Browsern oder Umgebungen funktionieren. Andererseits gibt es reguläre Funktionen seit den Anfängen von JavaScript und sie werden weitgehend unterstützt.

Hier ist eine Abbildung einer Pfeilfunktion, die unter etablierteren Bedingungen möglicherweise nicht funktioniert:

const hinzufügen = (a, b) => a + b;

Das Folgende ist eine vergleichbare reguläre Funktion, die in den meisten Situationen funktionieren sollte:

Funktionhinzufügen(a, b) {
zurückkehren a + b;
}

Verwenden Sie reguläre Funktionen anstelle von Pfeilfunktionen, wenn Sie auf ältere Umgebungen abzielen, um die Kompatibilität sicherzustellen. Pfeilfunktionen können jedoch eine Syntax bereitstellen, die bei der Arbeit mit modernen Browsern und Umgebungen einfacher zu verstehen und komprimierter ist.

Auswahl zwischen Pfeilfunktionen und regulären Funktionen in JavaScript

In JavaScript haben Pfeil- und reguläre Funktionen unterschiedliche Funktionen und Anwendungen. Pfeilfunktionen haben eine einfache Syntax, nämlich die Vererbung Das Schlüsselwortbegriffe können aus dem Kontext ihrer Verwendung abgeleitet werden, während reguläre Funktionen anpassungsfähiger sind und komplexere Situationen bewältigen können.

Es ist wichtig zu wissen, wie sie sich unterscheiden und wie Sie sie gemäß den Anforderungen Ihres Codes verwenden. Bei der Auswahl der zu verwendenden Funktion sollten Sie auch Kompatibilitätsunterschiede berücksichtigen.

Letztendlich sind die Pfeil- und regulären Funktionen von JavaScript leistungsstarke Werkzeuge, die Ihnen helfen, saubereren und effizienteren Code zu schreiben.