JavaScript: Pfeilfunktionen und Klassen verständlich einsetzen

JavaScript bietet verschiedene Formen, Funktionen und Objekte zu beschreiben. Eine kurze Schreibweise kann die Absicht verständlicher machen; sie kann aber auch Unterschiede verbergen, die für das Verhalten wichtig sind. Pfeilfunktionen und Klassen sollten Sie deshalb anhand ihres Zwecks auswählen.

Pfeilfunktionen bewusst verwenden

Die beiden Funktionen im Beispiel addieren ihre Argumente. Die Pfeilfunktion ist kurz, während die andere Schreibweise für weitere Anweisungen Platz bietet. Das Beispiel kann als eigenständiger JavaScript-Block ausgeführt werden.

// Traditionelle Funktion
const add = function(a, b) {
  return a + b;
};

// Pfeilfunktion
const addArrow = (a, b) => a + b;

Pfeilfunktionen übernehmen this aus ihrer Umgebung. Sie haben dadurch nicht dieselbe Bindung wie eine reguläre Funktion. Das ist etwa bei Callbacks nützlich; bei Methoden, die auf das aufrufende Objekt zugreifen sollen, müssen Sie die Bindung bewusst wählen. Eine kürzere Funktion ist nicht allein deshalb eine bessere Funktion.

Klassen für zusammengehöriges Verhalten

Das Klassenbeispiel beschreibt ein Tier und ein davon abgeleitetes Verhalten. Es veranschaulicht Konstruktor und Überschreibung einer Methode; daraus folgt keine Vorgabe für die Architektur einer größeren Anwendung.

class Tier {
  constructor(name) {
    this.name = name;
  }
  
  sprechen() {
    console.log(this.name + ' macht ein Geräusch.');
  }
}

class Hund extends Tier {
  sprechen() {
    console.log(this.name + ' bellt.');
  }
}

let hund = new Hund('Rex');
hund.sprechen(); // Rex bellt.

Lesbarkeit und Datenfluss prüfen

Fragen Sie bei einer neuen Klasse, welche Daten sie verwaltet und welche Verantwortung sie trägt. Manchmal sind einfache Funktionen und Datenobjekte übersichtlicher als eine Vererbungshierarchie. Prüfen Sie besonders Seiteneffekte und das Verhalten bei unerwarteten Eingaben.

Testen Sie den Code in den Zielumgebungen Ihrer Anwendung. Ob zusätzliche Übersetzung oder ein Bundler nötig ist, hängt von dieser Umgebung und dem Projekt ab. Die kleinen Beispiele verlangen keinen bestimmten Build-Aufbau und belegen keine Leistungsverbesserung durch eine bestimmte Syntax.

Weiterführende Dokumentation: JavaScript: Arrow functions.

Weiterführende Dokumentation: JavaScript: Classes.