JavaScript-Anmerkung: Wie Dekorateure Anmerkungssyntax zu Klassen hinzufügen

1. Anmerkungen vor dem Vorschlag des Dekorateurs
2. eine Grundierung für Dekorateure
3. Syntax eines Decorators
4. die Bewertung eines Dekorateurs
5. Dekorateure anrufen
6. ein Beispiel für Dekorateure

Dieser Artikel erklärt, wie Annotationen in aktuellem JavaScript aussehen. Wir sagen Anmerkungen, weil sie nicht wie klassische Anmerkungen in einer Sprache wie Java sind.

Ab dem 24. April 2022 ist Decorators jedoch immer noch ein Vorschlag der Stufe 3. Das bedeutet, dass Decorators noch nicht in JavaScript verfügbar sind.

Sobald sie jedoch verfügbar sind, bieten sie eine Möglichkeit, Annotationssyntax für Klassendeklarationen hinzuzufügen.

Anmerkungen vor dem Vorschlag des Dekorateurs

Vor den Vorschlägen für Decorators in JavaScript kommt einer Annotation am nächsten die Direktive "use script". Zum Beispiel:

(function() {
'use strict';
// code in strict mode
})();

Im obigen Code bewirkt die Direktive "use strict" die Ausführung im strikten Modus innerhalb der Funktion.

eine Grundierung für Dekorateure

Aus dem Decorators-Vorschlag sind Decorators Funktionen, die Sie für die Metaprogrammierung und das Hinzufügen von Funktionalität zu einem Wert verwenden können, ohne sein externes Verhalten zu ändern. Sie werden an Folgendem arbeiten.

1. Klassen
2. Klassenmethoden
3. Klassenfelder
4. Klassen-Accessoren
5. Auto-Accessoren der Klasse

Nachdem ein Dekorateur für diese Elemente aufgerufen wurde, kann ein Dekorateur Folgendes tun:

1. Ein Decorator kann eine Methode durch eine andere Methode oder eine Klasse durch eine andere Klasse ersetzen.
2. Dekorateure können über Accessor-Funktionen Zugriff auf den dekorierten Wert gewähren.
3. Dekorateure können den Wert initialisieren, den Sie dekorieren möchten.

Syntax eines Decorators

Der Vorschlag für Dekorateure befindet sich derzeit in Phase 3; es verwendet jedoch die Syntax aus Stufe 2. Daher gilt Folgendes für die Syntax eines Decorators.

1. Ihre Ausdrücke sind auf eine Kette von Variablen beschränkt. Außerdem führen Sie den Zugriff auf Eigenschaften mit Punktnotation und nicht mit eckiger Klammernnotation durch.

   Sie können jedoch @(Ausdruck) verwenden, wenn Sie einen beliebigen Ausdruck wünschen.

2. Sie können Klassenausdrücke und Klassendeklarationen dekorieren.

3. Klassendekorateure kommen nach export und default.

die Bewertung eines Dekorateurs

Die Bewertung eines Dekorateurs folgt den folgenden Schritten.

1. Decorator-Ausdrücke werden mit berechneten Eigenschaftsnamen ausgewertet.
2. Decorators werden während der Klassendefinition Funktionen genannt. Dies geschieht nach der Evaluierung der Methoden, aber vor dem Prototyp und dem Konstrukteur.
3. Dekorateure mutieren gleichzeitig den Konstruktor und die Prototypen.

Dekorateure anrufen

Wenn Sie Decorators aufrufen, erhalten sie zwei Parameter. Diese Parameter sind:

1. Der Wert, den Sie dekorieren möchten. Bei Klassenfeldern ist dieser Wert undefiniert.
2. Ein Kontextobjekt, das Informationen über den dekorierten Wert enthält.

ein Beispiel für Dekorateure

Das Folgende ist ein Beispielcode, der von einem ähnlichen Code aus dem Decorator-Vorschlag inspiriert wurde.

export function log(target) {
  if (typeof target.descriptor.value === 'function') {
    const original = target.descriptor.value;
    target.descriptor.value = function(...args) {
      console.log('arguments: ', args);
      const result = original.apply(this, args);
      console.log('result: ', result);
      return result;
    }
  }
  return target;
}

Danach arbeitet der Decorator wie folgt:

import {log} from './decorators.js';

export default class DogSounds {
  @log
  barkSound() {
    console.log('woof');
  }

  @log
  say(to_say) {
    console.log(to_say)
    return 'The dog said ' + to_say
  }
}

Aus dem obigen Code können Sie erkennen, dass die Anwendung des Decorators über das Symbol @ der Annotation einer Sprache wie Java ähnelt.

1. Können wir Decorators in JavaScript verwenden?

   Nein. Denn ab April 2022 handelt es sich immer noch um einen ECMA-Vorschlag der Stufe 3.

2. Wann können wir Decorators in JavaScript verwenden?

   Sie können Decorators in JavaScript verwenden, wenn der Decorators-Vorschlag Stufe 4 erreicht und in der nächsten Ausgabe von ECMAScript enthalten ist.