JavaScript-Decorators, call und apply

JavaScript-Decorators sowie die Methoden call und apply sind entscheidend für die Verwaltung des Funktionskontexts und die Erweiterung des Klassenverhaltens. Dieser Leitfaden erklärt, wie Sie sie effektiv mit praktischen Beispielen einsetzen können.

JavaScript-Decorators verstehen

Decorators bieten eine dynamische Möglichkeit, Klassendeklarationen und -member zu beobachten, zu modifizieren oder zu ersetzen. Der Decorator-Vorschlag befindet sich derzeit in Stufe 3. Obwohl die moderne Syntax standardisiert ist, verwenden viele bestehende Codebasen und Tutorials weiterhin die Legacy-Syntax, die einen Transpiler wie Babel erfordert.

Was sind Decorators?

Im Kern sind Decorators Funktionen, die es Ihnen ermöglichen, Klassenelementen (Methoden, Accessor-Funktionen, Eigenschaften) deklarativ neue Funktionalität hinzuzufügen. Zur Laufzeit umschließen sie die ursprüngliche Methode oder Eigenschaft, abfangen Aufrufe oder ändern deren Konfiguration, bevor die Instanz der Klasse erstellt wird. Sie werden direkt vor der Definition des Klassenelements platziert und bieten eine syntaktisch ausdruckstarke Möglichkeit, das Verhalten zu modifizieren.

Decorators verwenden

Um einen Decorator zu verwenden, stellen Sie der Decorator-Funktion ein @-Symbol voran und platzieren Sie sie über dem Klassenelement, das Sie ändern möchten. Hier ist ein grundlegendes Beispiel:

---

Warning: The legacy decorator syntax below is deprecated and requires a transpiler. The modern Stage 3 syntax is standardized and recommended for new projects.

function log(target, name, descriptor) {
  const original = descriptor.value;
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Calling ${name} with`, args);
      return original.apply(this, args);
    }
  }
  return descriptor;
}

class MyClass {
  @log
  doSomething(arg) {
    // Method body
  }
}

Dieser log-Decorator gibt jedes Mal eine Nachricht in der Konsole aus, wenn die Methode doSomething aufgerufen wird, einschließlich der übergebenen Argumente.

Hier ist das moderne Äquivalent in Stufe 3. In der Stufe-3-Spezifikation bezieht sich target bei Methodendecorators auf die ursprüngliche Methodenfunktion im Prototyp, daher ruft original.apply(this, args) sie korrekt auf. Die Rückgabe einer neuen Funktion ersetzt die ursprüngliche Methode. Decorators können auch auf Klassenfelder und Accessoren angewendet werden, wobei deren Initialisierung und Deskriptorbehandlung je nach Elementtyp leicht unterschiedlich sind.

function log(target, context) {
  const original = target;
  return function(...args) {
    console.log(`Calling ${context.name} with`, args);
    return original.apply(this, args);
  };
}

class MyClass {
  @log
  doSomething(arg) {
    // Method body
  }
}

call und apply nutzen

Die Methoden call und apply sind unverzichtbare Werkzeuge in JavaScript, um den this-Kontext einer Funktion festzulegen und sie aufzurufen. Obwohl sie ähnliche Zwecke erfüllen, unterscheidet sich ihre Verwendung leicht.

Die call-Methode

Die Methode call ruft eine Funktion mit einem bestimmten this-Wert und einzeln übergebenen Argumenten auf.

Beispiel für call:

---

Output appears here after Run.

Die apply-Methode

Im Gegensatz dazu ruft apply die Funktion mit einem bestimmten this-Wert und als Array übergebenen Argumenten auf.

Beispiel für apply:

---

Output appears here after Run.

Sowohl call als auch apply sind in Szenarien äußerst nützlich, in denen der this-Kontext explizit definiert werden muss oder wenn mit Funktionen gearbeitet wird, die eine variable Anzahl von Argumenten akzeptieren.

Note: Unlike call and apply, which invoke the function immediately, bind returns a new function with the this context permanently set, allowing for deferred execution.

const boundGreet = greet.bind(person);
boundGreet(); // Output: "Hello, John"

Praktische Anwendungen

Decorators vereinfachen das Hinzufügen von Verhalten zu Objekten, ohne den ursprünglichen Code zu ändern, und fördern ein saubereres und modulareres Design. Ebenso bieten call und apply Flexibilität bei der Funktionsaufrufe, was entscheidend ist, um den richtigen this-Kontext beizubehalten oder variadische Funktionen zu verarbeiten.

Fazit

Decorators sowie die Methoden call und apply bieten leistungsstarke Werkzeuge zum Schreiben von prägnantem, flexiblem und effizientem JavaScript. Das Beherrschen dieser Konzepte ermöglicht eine bessere Code-Wiederverwendbarkeit, Abstraktion und Kontextverwaltung in komplexen Anwendungen.

Praxis

Welche Aussagen beschreiben die Verwendung und Unterschiede zwischen den Methoden `call` und `apply` in JavaScript korrekt?

Sowohl `call` als auch `apply` können verwendet werden, um eine Funktion mit einem angegebenen `this`-Kontext aufzurufen.Die Methode `call` erfordert, dass Argumente einzeln übergeben werden, während `apply` ein Array von Argumenten akzeptiert.`apply` wird ausschließlich für Funktionen verwendet, die keinen `this`-Kontext benötigen.`call` kann verwendet werden, um Eigenschaften und Methoden von einem anderen Objekt zu erben.Sowohl `call` als auch `apply` sind Methoden des Function-Prototyps, was ihre Verwendung mit jeder JavaScript-Funktion ermöglicht.Der einzige Unterschied zwischen `call` und `apply` liegt im Performance-Aspekt in bestimmten JavaScript-Engines.