Wenn Sie sich in JavaScript schon gefragt haben, wann man Pfeilfunktionen und wann traditionelle Funktionen verwendet, oder einfach was der Unterschied zwischen den beiden Optionen ist, dann sind Sie hier genau richtig!
Hinweise:
Wenn ich von einer traditionellen Funktion spreche, spreche ich von einer Funktion, die mit dem Schlüsselwort 'function' deklariert wurde
Eine Pfeilfunktion (oder Arrow Function auf Englisch) ist eine Funktion, die mit der kompakten Syntax () => {} deklariert wird
Teil 1: This
Der erste Unterschied zwischen den beiden Optionen ist die Handhabung von "this"; Pfeilfunktionen behalten nämlich das "this" des Kontextes bei, in dem die Funktion aufgerufen wurde, was bei einer traditionellen Funktion nicht unbedingt der Fall ist. Hier ist ein Beispiel zur Veranschaulichung: language=js class MyClass { prop = "hehe"; testArrow() { const f = () => { console.log(this.prop); }; f(); } testFunction() { function f() { console.log(this.prop); } f(); } } const instance = new MyClass();
Beim Aufruf von: instance.testArrow() Wird es keinen Fehler geben, da das this der Klasseninstanz beibehalten wird, wenn man aber versucht: instance.testFunction() Es wird zu einem JavaScript-Fehler kommen: "Cannot read properties of undefined" ...
Um diesen Fehler zu verstehen, muss man etwas mehr über das Schlüsselwort this und JavaScript im Allgemeinen wissen:
In einer traditionellen Funktion entspricht "this" dem globalen Objekt
In einer traditionellen Funktion UND im Strict Mode ("use strict";) wird "this" undefined sein
Der Rumpf einer Klasse wird immer im Strict Mode ausgeführt
Nun, in unserem Fall ist die Funktion in einer Klasse deklariert, also im Strict Mode, daher wird "this" undefined sein, was zu unserem JavaScript-Fehler "Cannot read properties of undefined" führt.
Bonus:
Wenn wir unsere Methode "testFunction" in der Klasse "MyClass" durch den folgenden Code ersetzen:
testFunctionBinded() {
function f() {
console.log(this.prop);
}
f.bind(this)();
}
Diese Methode ist identisch mit Ausnahme des Aufrufs von f().
Indem man f aufruft und sie manuell mit der folgenden Syntax an das korrekte "this" bindet: f.bind(this)(); Es wird keinen Fehler geben beim Aufruf von instance.testFunctionBinded()
Teil 2: JavaScript Hoisting
In JavaScript, wenn man das Schlüsselwort "function" verwendet, kann man diese Funktion vor ihrer Deklaration verwenden (solange man im selben Block bleibt); das nennt man Hoisting.
In bestimmten Fällen ist das recht angenehm, aber sehr oft führt es zu schwer zu debuggenden Fehlern, zum Beispiel:
if (true) {
function a() {
console.log("1");
}
if (true) {
a();
function a() {
console.log("2");
}
}
}
Hier deklariert man eine erste Funktion "a", dann im nächsten Block, am Anfang des Blocks ruft man a() auf und am Ende des Blocks deklariert man eine weitere Funktion "a". Beim Aufruf von a() wird nicht die Funktion aufgerufen, die man erwartet hat, da die zweite Funktion "a" "gehoisted" wird...
Oft verwendet man Pfeilfunktionen in einem "const" oder "let", was eine wesentlich einfachere Lesbarkeit des Codes ermöglicht, da er von oben nach unten lesbar ist und somit den oben genannten Fehler beseitigt.
Fazit! Persönlich ziehe ich es vor, Pfeilfunktionen zu verwenden, da das Verhalten viel einfacher vorherzusagen ist und der Code leichter lesbar ist!
