So verwenden Sie Pfeilfunktionen in JavaScript
- 3677
- 268
- Susanne Stoutjesdijk
Die Pfeilfunktionssyntax wurde mit ECMascript6 eingeführt: Durch die Verwendung dieser neuen Syntax können wir in einigen (aber nicht allen) Fällen prägnante und lesbare Code erzeugen, insbesondere wenn unsere Funktion nur einen Ausdruck enthält. In diesem Tutorial werden wir sehen, wie wir eine Pfeilfunktion definieren können, welche Unterschiede mit Standardfunktionen sind und welche Fälle die Verwendung von Pfeilfunktionen nicht angemessen sind.
In diesem Tutorial lernen Sie:
- Was ist eine Pfeilfunktion.
- Wie eine Pfeilfunktion definiert ist.
- Die Unterschiede zwischen Pfeilfunktionen und Standardfunktionen.
- Die Fälle, in denen Pfeilfunktionen nicht verwendet werden können.
| Kategorie | Anforderungen, Konventionen oder Softwareversion verwendet |
|---|---|
| System | Betriebssystem agnostisch. |
| Software | Eine Installation von Knoten Um dieses Tutorial in einer Nicht-Browser-Umgebung zu verfolgen. |
| Andere | Kenntnis von JavaScript und objektorientierten Konzepten. |
| Konventionen | # - erfordert, dass gegebene Linux -Befehle mit Root -Berechtigungen entweder direkt als Stammbenutzer oder mit Verwendung von ausgeführt werden können sudo Befehl$ - Erfordert, dass die angegebenen Linux-Befehle als regelmäßiger nicht privilegierter Benutzer ausgeführt werden können |
Was ist eine "Pfeilfunktion"?
Die Pfeilfunktionen wurden mit ECMascript6 eingeführt: Durch die Verwendung dieser neuen Syntax können wir häufig mehr präzisen Code erhalten, in einigen Fällen, in denen Multi-Line-Rückrufe in Einzeiler übersetzen, dank Funktionen wie dem implizite Rendite. Aufgrund seiner Besonderheiten können Pfeilfunktionen jedoch nicht überall Standardfunktionen ersetzen: Es gibt einige Kontexte, in denen wir sie nicht verwenden können, und wir werden sehen, warum.
Von Standardfunktionen bis hin zu Pfeilfunktionen
In diesem Absatz sehen wir ein Beispiel dafür, wie wir eine Standardfunktion durch eine Pfeilfunktion ersetzen können: Wir werden einen Rückruf höherer Ordnung als perfektes Beispiel dafür verwenden.
Wie Sie sicher wissen, eine Funktionen höherer Ordnung ist eine Funktion, die eine andere Funktion zurückgibt oder eine andere Funktion als Argument akzeptiert. In diesem Beispiel werden wir verwenden Filter, oder Array.Prototyp.Filter wenn du möchtest. Diese Methode der Array -Objekt, Nimmt eine Funktion als Argument an und gibt ein neues Array zurück, das von allen Elementen des ursprünglichen Arrays besiedelt ist, die für den in der Rückruffunktion implementierten Test positiv sind.
Sehen wir uns ein Beispiel für die Verwendung des Filters mit einer klassischen Funktion an. Stellen Sie sich vor, wir haben eine Reihe von Objekte, Jeder von ihnen repräsentiert Charaktere aus dem Buch „Lord of the Rings“:
const charnes = [name: 'frodo', race: 'hobbit', name: 'sam', race: 'hobbit', name: 'legolas', race: 'Elf', name: ' Aragorn ', Rasse:' Man ', Name:' Boromir ', Rasse:' Man '] Der Figuren Array enthält 5 Elemente; Jeder von ihnen hat zwei Eigenschaften: Name Und Wettrennen. Nehmen wir nun an, wir möchten ein neues Array erstellen, das nur von den Charakteren bevölkert wird, die zur Rasse der Männer gehören. Mit Filter und der Standardfunktionssyntax schreiben wir:
const männer = Zeichen.Filter (Funktion filterMen (Element) Rückgabeelement.Rasse == 'Mann'; ); Wie bereits erwähnt, Filter, Nimmt eine Funktion als Argument an: Bei Verwendung der Standardsyntax kann diese Funktion entweder genannt oder anonym genannt werden. In den meisten Situationen werden anonyme Funktionen als Rückrufe verwendet, um dieses Beispiels willen, und um später einen der Unterschiede zwischen Standard- und Pfeilfunktionssyntax hervorzuheben, gaben wir unserer Funktion einen Namen: Filternen.
Die Rückruffunktion, mit der verwendet werden soll Filter, nimmt nur einen obligatorisch Parameter, das das Element des ursprünglichen Arrays ist, das jedes Mal verarbeitet wird. Wenn die Funktion zurückgibt WAHR, Das Element wird als Mitglied des Neuarrays eingefügt, wenn die Funktion zurückgibt FALSCH Das Element ist nicht. In diesem speziellen Fall haben wir einen einfachen Test definiert:
Charakter.Rasse == 'Mann' 'Dieser Test kehrt zurück WAHR Wenn der WettrennenEigenschaft des Elements, das verarbeitet wird, entspricht dem String 'Man'. Hier ist das Ergebnis dessen, was wir oben geschrieben haben:
[Name: 'Aragorn', Rasse: "Man ', Name:' Boromir ', Rasse:" Man'] Nehmen wir nun an, wir möchten den obigen Code mit einem neu refaktorieren Pfeilfunktion. Wir würden schreiben:
const männer = Zeichen.filter (Element => Element.Rasse == 'Mann'); Durch Verwendung der Pfeilfunktionen Syntax, wir konnten das gleiche Ergebnis des vorherigen Beispiels mit nur einer Codezeile erzielen: Wie schön ist das?!. Mach dir keine Sorgen, wenn die neue Syntax auf den ersten Blick dich verwirrt, lesen Sie einfach weiter. Lesen Sie einfach weiter.
Die Pfeilfunktionssyntax
Während wir eine Standardfunktion definieren, indem wir die verwenden Funktion Schlüsselwort, eine Pfeilfunktion wird durch die Verwendung des => Symbol. Dies ist offensichtlich nicht der einzige Unterschied zwischen den beiden: Eine der wichtigsten, die wir hier hervorheben sollten, ist, dass klassische Funktionen zwar in Funktionsausdrücken entweder genannt werden oder anonym, Pfeilfunktionen immer anonym sind.
Argumente in Pfeilfunktionen definieren
Im vorherigen Beispiel, da wir das loswerden Funktion Schlüsselwort, das erste, was wir lesen können, ist Element, Welches ist das Argument, das von der Pfeilfunktion akzeptiert wird. Die Regel, die bei der Definition der Argumente, die durch eine Pfeilfunktion erwartet werden, zu folgen, ist einfach: Wenn die Funktion mehrere Argumente oder überhaupt keine Argumente akzeptiert, müssen wir sie zwischen Klammern einschließen; Wenn die Funktion nur ein Argument enthält, wie es in unserem Beispiel der Fall ist, können wir die Klammern vollständig weglassen.
Stellen Sie sich als Beispiel vor, wir möchten eine Funktion definieren, die das Produkt von zwei Zahlen zurückgibt, die als Argumente übergeben wurden. Wir würden schreiben:
// Da die Funktion zwei Parameter nimmt, müssen wir Klammern konstant multiplizieren = (a, b) => a * b; Implizite Rückkehr und lockige Zahnspangen
In allen obigen Beispielen haben Sie möglicherweise das Fehlen einer anderen Sache bemerken: die Geschweifte Klammern welches den Körper der Funktion begrenzt. Warum haben wir sie weggelassen?? Wenn der Körper der Pfeilfunktion nur aus einem Ausdruck besteht, können die lockigen Klammern weggelassen werden: Wenn dies der Fall ist, wird das Ergebnis des Ausdrucks implizit zurückgegeben:
// Wenn wir lockige Klammern weglassen, wird das Ergebnis des Ausdrucks implizit zurückgegeben. multiplizieren (2,3); 6 // Ergebnis ist 6: Es wird implizit zurückgegeben // Wenn wir lockige Klammern verwenden, wird das Ergebnis nicht implizit zurückgegeben. Undefiniert // Ergebnis wird undefiniert sein, da wir das Ergebnis des Ausdrucks nicht ausdrücklich zurückgeben Im obigen Code haben wir eine sehr einfache Funktion definiert, multiplizieren: Diese Funktion erwartet zwei Parameter, daher müssen wir sie zwischen Klammern einschließen. Der => Symbol definiert die Pfeilfunktion. Im ersten Beispiel, da wir nur einen Ausdruck haben, der das Produkt der beiden als Parameter übergebenen Zahlen zurückgibt, können wir lockige Klammern weglassen und die implizite Rückgabefunktion nutzen.
Im zweiten Beispiel haben wir die lockigen Klammern verwendet, daher kehrte die Funktion zurück nicht definiert, Da wir keine implizite Rendite haben: um das erwartete Ergebnis zu erzielen, hätten wir verwenden sollen zurückkehren ausdrücklich.
Mehrere Aussagen oder Ausdrücke im Funktionskörper
Curly -Zahnspangen sind auch die einzige Möglichkeit, mehrere Aussagen oder Ausdrücke in einer Pfeilfunktion anzugeben. Nehmen wir beispielsweise an, dass wir, anstatt das Produkt zweier Zahlen zurückzugeben, unsere Funktion eine Zeichenfolge ausgeben soll, wobei es angezeigt wird:
const multiply = (a, b) => const product = a*b; Konsole.log ('das Produkt von $ a und $ b ist $ product'); multiplizieren (2,3); Das Produkt von 2 und 3 ist 6 Was ist, wenn unsere Pfeilfunktionen ein Objektliteral zurückgeben müssen, das selbst durch lockige Zahnspangen abgegrenzt wird? In diesem Fall müssen wir das Objektliteral zwischen Klammern einschließen:
const createChar = (Zeichenname, ZeichenRace) => (Name: Zeichenname, Rasse: CharakterRace); createechar ('gimli', 'zwarf') name: "gimli ', race:" zwarf' Wie Das verhält sich in Pfeilfunktionen
Einer der relevantesten, wenn nicht der relevanteste Unterschied zwischen klassischen Funktionen und Pfeilfunktionen ist, wie die Das Arbeiten. Dieser Unterschied ist der Hauptgrund, warum wir in einigen Fällen keine Pfeilfunktionen verwenden können, wie wir bald sehen werden. Bevor Sie die Unterschiede hervorheben, Lassen Sie uns zusammenfassen, wie Das funktioniert, wenn es in Standardfunktionen verwendet wird. Das erste, was man sich erinnern sollte, ist das, der Wert von Das wird dadurch bestimmt, wie die Funktion selbst aufgerufen wird, sehen wir einige Beispiele an.
Der Standard: Das ist ein Hinweis auf den globalen Umfang
Wenn Das wird in einer eigenständigen Funktion verwendet, und wir arbeiten nicht in strikter Modus, Es verweist auf den globalen Umfang, das ist das Fenster Objekt in einer Browserumgebung oder der globales Objekt im Knoten.JS. In der gleichen Situation, aber im strengen Modus, Das wird sein nicht definiert Und wir erhalten einen Fehler:
var i = 20; // Hier haben wir var verwendet, anstatt es zu lassen, weil letztere keine Eigenschaft im globalen Bereich erstellt. Funktion foo () Konsole.Protokoll (dies.ich); // Nicht-Strect-Modus foo () 20 // Strict Mode Foo () TypeERRror: Eigenschaft 'I' von undefined kann nicht lesen Implizite Bindung
Wenn in einem Objekt auf eine Standardfunktion verwiesen wird und diese Funktion mit diesem Objekt als a aufgerufen wird Kontext, Verwenden der Punktnotation, Das wird ein Hinweis auf dieses Objekt. Wir nennen es implizite Bindung:
Funktion foo () Konsole.Protokoll (dies.ich); let object = i: 20, foo: foo // Die FOO -Eigenschaft ist ein Verweis auf die FOO -Funktion Objekt.foo () // Dies ist ein Verweis auf Objekt, also dies.Ich ist Objekt.i 20 Explizite Bindung
Wir sagen, dass wir eine verwenden explizite Bindung Wenn wir explizit was erklären, was Das sollte sich verweisen. Es kann durch die Verwendung der verwendet werden Forderung, anwenden oder binden Methoden einer Funktion (die in JavaScript selbst ein erstklassiges Objekt ist. Denken Sie an den ersten Fall, den wir oben erwähnt haben, wenn die Standardbindung gilt:
var i = 20; Funktion foo () Konsole.Protokoll (dies.ich); const Object = i: 100 foo () // Dies gibt 20 aus oder generiert ein Typeerror im strengen Modus. // Wenn wir dies ausdrücklich so einstellen, dass sich die Dinge ändern, ändert sich die Dinge. // Rufen Sie an und wenden Sie an, die Funktion sofort mit dem neuen Kontext ausführen: foo.Rufen Sie (Objekt) // Ausgabe 100 foo.Anwenden (Objekt) // Ausgabe ist 100 // Binden Sie stattdessen eine neue Funktion mit dem angegebenen Kontext zurück. lass bodefoo = foo.Bind (Objekt) bordefoo () // Ausgabe ist 100 Das sind einige Unterschiede zwischen Forderung, anwenden Und binden: Das Relevante ist, dass letztere a zurückgibt a neue Funktion an den angegebenen Kontext gebunden, während mit den anderen beiden die an den angegebene Kontext gebundene Funktion sofort ausgeführt wird. Es gibt andere Unterschiede, aber wir werden sie hier nicht sehen. Das Wichtigste ist zu verstehen, wie explizit Bindung funktioniert.
Wie Pfeilfunktionen unterschiedlich sind in Das betrachten?
In allen obigen Fällen und Beispielen haben wir gesehen, wie bei der Verwendung von Standardfunktionen der Wert von Das hängt davon ab, wie die Funktion genannt wird. Pfeilfunktionen verwenden stattdessen die lexikalisch das: Sie haben keine eigenen Das, benutze aber immer die Das aus ihrem umschließenden Umfang. Ein typisches Beispiel, bei dem dies unerwartete Effekte auf Ereignishörer erzeugen kann. Angenommen, wir haben eine Schaltfläche mit ID "Button1" und möchten seinen Text ändern, wenn er klickt:
Klick mich! // Der Ereignishörer mit einer Standardfunktion als Rückrufdokument.getElementById ('Button1').AddEventListener ('Click', Function () this.InnerText = "klickte!";) Der Code funktioniert perfekt und sobald die Schaltfläche klickt, ändert sich der Text wie erwartet. Was ist, wenn wir in diesem Fall eine Pfeilfunktion verwenden?? Angenommen, wir schreiben es so:
dokumentieren.getElementById ('Button1').AddEventListener ('Click', () => Dies.InnerText = "klickte!";)) Der obige Code funktioniert nicht, warum? Einfach: Weil, wie wir bereits gesagt haben, im ersten Beispiel, Das In der Standard -Rückruffunktion verweist das Objekt, auf dem das Ereignis auftritt (die Schaltfläche), wenn wir die Pfeilfunktion verwenden Das wird aus dem übergeordneten Umfang geerbt, in diesem Fall die Fenster Objekt. Aus Vollständigkeit sollten wir sagen, dass das obige Beispiel leicht repariert werden kann, um mit einer Pfeilfunktion zu arbeiten:
dokumentieren.getElementById ('Button1').AddEventListener ('Click', Event => Ereignis.Ziel.InnerText = "klickte!";)) Diesmal funktioniert der Code, weil wir nicht benutzt haben Das Um auf die Schaltfläche zu verweisen, aber wir lassen unsere Funktion ein Argument akzeptieren, nämlich Fall. In der Funktionskörper, die wir verwendet haben Fall.Ziel auf das Objekt verweisen, das das Ereignis versandte.
Aus dem gleichen Grund, warum wir oben erwähnt haben, können Pfeilfunktionen nicht als Objektmethoden oder Prototypmethoden verwendet werden:
// Pfeilfunktionen funktionieren nicht als Objektmethoden… const Object1 = i: 1000, foo: () => Konsole.log ('Der Wert von i ist $ this.i ') Objekt1.foo () Der Wert von I ist undefiniert //… und sie funktionieren nicht als Prototypmethoden. const Person = Funktion (Name, Alter) this.Name = Name; Das.Alter = Alter; Person.Prototyp.Einführung = () => Konsole.log ('Mein Name ist $ this.Name und ich bin $ dies.Alter Jahre alt '); const Jack = neue Person ('Jack', 100); Jack.Name 'Jack' Jack.Alter 100 Jack.introy () mein Name ist undefiniert und ich bin undefinierte Jahre alt Schlussfolgerungen
Die Pfeilfunktionssyntax ist eine sehr schöne Funktion, die mit ECMascript6 eingeführt wird. Mit dieser neuen Art, Funktionen zu definieren, können wir einen kürzeren und saubereren Code schreiben. Wir haben gesehen, wie man eine Pfeilfunktion definiert und wie die neue Syntax funktioniert.
Wir haben auch gesehen, warum Pfeilfunktionen unter allen Umständen keine Standardfunktionen ersetzen können, weil sie keine eigenen haben Das, und verwendet den von ihrem umschließenden Umfang: Dies macht sie, wie wir in diesem Tutorial gesehen haben. Wenn Sie an anderen JavaScript -Tutorials interessiert sind, bleiben Sie dran: Im nächsten Tutorial werden wir darüber sprechen bringen, Funktion. In der Zwischenzeit können Sie unseren Artikel über Versprechen überprüfen.
Verwandte Linux -Tutorials:
- Advanced Bash Regex mit Beispielen
- Einführung in JavaScript -Schleifen
- Eine Einführung in Linux -Automatisierung, Tools und Techniken
- Mastering -Bash -Skriptschleifen beherrschen
- Dinge zu installieren auf Ubuntu 20.04
- Verschachtelte Schleifen in Bash -Skripten
- Bash Regexps für Anfänger mit Beispielen
- Mint 20: Besser als Ubuntu und Microsoft Windows?
- GDB -Debugging -Tutorial für Anfänger
- Erstellen Sie Umleitungs- und Umschreiben von Regeln in .Htaccess auf Apache…