Es gibt verschiedene Arten von Dekoratoren in es6

Es gibt zwei Arten von es6-Dekoratoren. Dekoratoren können nur für Klassen und Klassenmethoden verwendet werden und können daher unterteilt werden in: 1. Klassendekoratoren, die zum Dekorieren der gesamten Klasse verwendet werden. Die Syntax lautet „@ Funktionsname“. 2. Klassenmethodendekoratoren, die zum Dekorieren von Methoden verwendet werden Für die Klasse lautet die Syntax „@ Funktionsname Methodenname“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

Es gibt verschiedene Arten von es6-Dekoratoren.

Es gibt zwei Arten von es6-Dekoratoren.

Decorator ist eine auf eine Klasse bezogene Syntax, die zum Kommentieren oder Ändern klassenbezogener Methoden und Eigenschaften verwendet wird. Viele objektorientierte Sprachen verfügen über diese Funktion. Bezieht sich im Allgemeinen auf Klassen und verwendet keine gewöhnlichen Methoden.

Ein Dekorator ist eine Funktion, geschrieben mit @ + Funktionsname. Es kann vor der Definition von Klassen und Klassenmethoden platziert werden. Der Dekorateur führt die Funktion aus und fügt der Klasse oder den Attributmethoden unter der Klasse einige Steuerbedingungen hinzu.

Dekoratoren können aufgrund des Funktionshebens nur für Klassen und Klassenmethoden verwendet werden, nicht für Funktionen.

1. Klassendekorator

Der Klassendekorator wird zum Dekorieren der gesamten Klasse verwendet

Das Beispiel lautet wie folgt:

@decorateClass
class Example {
    //...
}
 
function decorateClass(target) {
    target.isTestClass = true
}

Wie im obigen Code ändert der Dekorator @decorateClass das Verhalten der gesamten Klasse Beispiel und fügt hinzu statische Attribute für die Beispielklasse isTestClass. Der Dekorator ist eine Funktion. Das Parameterziel in der Funktion „decorateClass“ ist die Beispielklasse selbst, die auch dem Klassenkonstruktor „Example.prototype.constructor.

2“ entspricht dekorieren Sie die Klassenmethode

Beispiele sind wie folgt:

class Example {
    @log
    instanceMethod() { }
 
    @log
    static staticMethod() { }
}
 
function log(target, methodName, descriptor) {
  const oldValue = descriptor.value;
 
  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
 
  return descriptor;
}

Wie im obigen Code dekoriert der Dekorator @log die Instanzmethode „instanceMethod“ bzw. die statische Methode „staticMethod“. Die Funktion des @log-Dekorators besteht darin, console.log auszuführen, um das Protokoll auszugeben, bevor der ursprüngliche Vorgang ausgeführt wird.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend】

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Arten von Dekoratoren in es6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!