Wie man ES6-Dekoratoren versteht

In es6 ist das Dekoratormuster eine Designtheorie, die die Funktionen eines Objekts dynamisch erweitert, ohne die ursprüngliche Klasse zu ändern, und das Wesentliche des Dekorators ist eine gewöhnliche Funktion, die zum Erweitern von Klassenattributen und Klassenmethoden verwendet wird. Vorteile der Verwendung von Dekoratoren: 1. Der Code wird besser lesbar und die Benennung des Dekorators entspricht einem Kommentar. 2. Die ursprünglichen Funktionen können erweitert werden, ohne den ursprünglichen Code zu ändern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Wie versteht man Decorator in ES6?

Decorator, dessen Name uns leicht an das Decorator-Muster erinnert

Einfach ausgedrückt ist das Decorator-Muster eine Möglichkeit, ein Objekt dynamisch zu erweitern, ohne die ursprüngliche Klasse zu ändern und die Theorie des funktionalen Designs zu verwenden.

Das Gleiche gilt für die Decorator-Funktion in ES6. Ihr Kern ist keine High-End-Struktur, sondern lediglich eine gewöhnliche Funktion zur Erweiterung von Klassenattributen und Klassenmethoden.

Hier wird ein Soldat definiert, der keine Ausrüstung hat Zu diesem Zeitpunkt

class soldier{ 
}

Definieren Sie eine Funktion, um AK-Ausrüstung zu erhalten, d Die Verwendung von Decorator (Dekoration) ist deutlich zu erkennen. Zwei Hauptvorteile:

Der Code wird besser lesbar und die Benennung des Dekorators entspricht einem Kommentar

Erweitern Sie die ursprüngliche Funktion, ohne den ursprünglichen Code zu ändern

• Decoration Die Verwendung des Werkzeugs

Docorator modifizierte Objekte sind die folgenden zwei Typen: Klassendekoration

Klassenattributdekoration
• Klassendekoration

Bei der Dekoration der Klasse selbst, es kann einen Parameter akzeptieren, nämlich die Klasse selbst

Zerlegen Sie das Dekoratorverhalten, und jeder kann ein tieferes Verständnis haben

function strong(target){
    target.AK = true
}

Das Folgende

ist ein Dekorator, und das Ziel ist die eingehende Klasse, nämlich MyTestableClass, die das Hinzufügen implementiert zur Klasse Statische Attribute

@strong
class soldier{
}

Wenn Sie Parameter übergeben möchten, können Sie eine Funktionsebene außerhalb des Dekorators kapseln

soldier.AK // true

Dekoration von Klassenattributen@testable

Beim Dekorieren von Klassenattributen können Sie drei Parameter akzeptieren:

Das Prototypobjekt der Klasse

Der Attributname, der dekoriert werden muss
Das Beschreibungsobjekt des dekorierten Attributnamens
Definieren Sie zunächst einen schreibgeschützten Dekorator

• @decorator
  class A {}
  
  // 等同于
  
  class A {}
  A = decorator(A) || A;

  Verwenden Sie readonly, um die Namensmethode zu dekorieren der Klasse

  @testable
  class MyTestableClass {
    // ...
  }
  
  function testable(target) {
    target.isTestable = true;
  }
  
  MyTestableClass.isTestable // true

Es entspricht dem folgenden Aufruf

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

Wenn eine Methode mehrere Dekoratoren hat, wie eine Zwiebel, tritt sie zuerst von außen nach innen ein und wird dann von innen nach außen ausgeführt

function readonly(target, name, descriptor){
  descriptor.writable = false; // 将可写属性设为false
  return descriptor;
}

Der äußere Dekorator @dec (1) wird zuerst eingegeben, aber die innere Ebene wird zuerst ausgeführt. Der Dekorator @dec(2) wird zuerst ausgeführt In der Kompilierungsphase wird Folgendes angezeigt

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

Die Absicht besteht darin, den Zähler nach der Ausführung gleich 1 zu machen, aber tatsächlich ist das Ergebnis, dass der Zähler gleich 0 ist

Verwendungsszenarien des Dekorators

Basierend auf der mächtigen Rolle Mit dem Dekorator können wir die Anforderungen verschiedener Szenarien erfüllen. Hier sind einige: Verwenden Sie React. Wenn Sie Redux in der folgenden Form schreiben, ist es sowohl unansehnlich als auch mühsam.

readonly(Person.prototype, 'name', descriptor);

Durch Dekoratoren wird es viel einfacher

function dec(id){
    console.log('evaluated', id);
    return (target, property, descriptor) =>console.log('executed', id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

Mixins können auch als Dekoratoren geschrieben werden, was die Verwendung prägnanter macht

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {
}

Lassen Sie uns über mehrere gängige Dekoratoren in core-decorators.js sprechen

@antobindAutobind-Dekorator sorgt dafür, dass dieses Objekt in der Methode das Original bindet Object

var counter;
var add;

@add
function foo() {
}

counter = 0;

add = function () {
  counter++;
};

@readonly

readonly Decorator macht die Eigenschaft oder Methode nicht beschreibbar. [Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWie man ES6-Dekoratoren versteht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!