Was ist der Unterschied zwischen einer klassischen Funktion und einer Pfeilfunktion in JavaScript?

Der Hauptunterschied liegt darin, wie sie mit this arbeiten.

Eine klassische Funktion hat ihr eigenes this, das durch den Kontext bestimmt wird, in dem sie aufgerufen wird (wie sie aufgerufen wurde).

Eine Pfeilfunktion hat kein eigenes this. Sie erbt this lexikalisch aus der Umgebung, in der sie definiert wurde.

Weitere Unterschiede:

• arguments Objekt: Klassische Funktionen haben Zugriff auf das arguments-Objekt, Pfeilfunktionen nicht (aber man kann Rest-Parameter verwenden).
• Konstruktoren: Klassische Funktionen können als Konstruktoren mit dem new-Operator verwendet werden. Pfeilfunktionen nicht.
• prototype-Eigenschaft: Klassische Funktionen haben die prototype-Eigenschaft. Pfeilfunktionen nicht.

Beispiel für die Arbeit mit this:

// Beispiel mit klassischer Funktion
const obj = {
  name: 'Objekt',
  greet: function() {
    console.log(this.name); // this bezieht sich auf obj
  }
};

obj.greet(); // Gibt aus: Objekt

const greetFunc = obj.greet;
greetFunc(); // Gibt aus: undefined (oder Window im Browser) - this verliert den Kontext von obj

// Beispiel mit Pfeilfunktion
const objArrow = {
  name: 'Objekt mit Pfeil',
  greet: () => {
    console.log(this.name); // this erbt den externen Kontext (in diesem Fall global oder Window)
  }
};

objArrow.greet(); // Gibt aus: undefined (oder den Fenstertitel im Browser, wenn name global definiert ist)

const greetArrowFunc = objArrow.greet;
greetArrowFunc(); // Gibt aus: undefined (oder den Fenstertitel im Browser) - this ändert sich nicht