Wofür werden es6-Modifikatoren verwendet?

In ES6 werden Dekoratoren verwendet, um Klassen und Klassenmethoden zu kommentieren oder zu ändern. Dabei wird auf die Methode „Object.defineProperty“ von ES5 zurückgegriffen, die als „@Funktionsname“ geschrieben wird. Der Dekorator ist eigentlich eine Funktion, die normalerweise in Klassen und Klassen an der Vorderseite platziert wird der Methode. Modifikatoren können in Klassen, Methoden und Attributparameter eingefügt werden, um die Funktionen von Klassen, Attributen, Methoden und Parametern zu erweitern.

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

Decorator Pattern ermöglicht das Hinzufügen neuer Funktionen zu einem vorhandenen Objekt, ohne seine Struktur zu ändern. Bei dieser Art von Entwurfsmuster handelt es sich um ein Strukturmuster, das als Hülle um eine vorhandene Klasse fungiert.

Dieses Muster erstellt eine Dekorationsklasse, um die ursprüngliche Klasse zu umschließen und zusätzliche Funktionalität bereitzustellen, während gleichzeitig die Integrität der Klassenmethodensignatur gewahrt bleibt.

ES6 Decorator (Decorator)

In ES6 ist Decorator (Decorator) eine klassenbezogene Syntax, die zum Kommentieren oder Ändern von Klassen und Klassenmethoden verwendet wird.

Ein Dekorator ist eigentlich eine Funktion, die normalerweise vor Klassen und Klassenmethoden platziert wird.

@decorateClass
class Example {
    @decorateMethods
    method(){}
}

Im obigen Code werden zwei Dekoratoren verwendet. Der Dekorator @decorateClass() wird für die Klasse selbst verwendet, um die Funktionalität der Klasse hinzuzufügen oder zu ändern Klasse. Methode, die zum Kommentieren oder Ändern von Klassenmethoden verwendet wird.

Zwei Arten von Dekoratoren (Dekoratoren)

Dekoratoren können aufgrund der Funktionsförderung nur für Klassen und Klassenmethoden verwendet werden, nicht für Funktionen.

Dekoratoren können nur für Klassen und Klassenmethoden verwendet werden. Schauen wir uns die Verwendung von zwei Arten von Dekoratoren an. Klassendekoratoren werden zum Dekorieren der gesamten Klasse verwendet. Klassendekoratoren Der Parameter

Ziel: Die Klasse selbst entspricht auch dem Konstruktor der Klasse: Class.prototype.constructor.

@decorateClass
class Example {
    //...
}

function decorateClass(target) {
    target.isTestClass = true
}

Wie im obigen Code ändert der Dekorateur @decorateClass das Verhalten der gesamten Beispielklasse und fügt der Beispielklasse ein statisches Attribut isTestClass hinzu. Der Dekorator ist eine Funktion. Das Parameterziel in der Funktion „decorateClass“ ist die Beispielklasse selbst, die auch dem Klassenkonstruktor „Example.prototype.constructor“ entspricht.

Der Dekorator übergibt Parameter

Der oben implementierte Dekorator kann nicht verwendet werden Wenn Sie bei Verwendung des Dekorators Parameter übergeben möchten, können Sie eine Funktionsebene außerhalb des Dekorators kapseln.

@decorateClass(true)
class Example {
    //...
}

function decorateClass(isTestClass) {
    return function(target) {
  target.isTestClass = isTestClass
  }
}

Der im obigen Code implementierte Dekorator kann bei Verwendung Parameter übergeben Auf diese Weise kann das Verhalten des Dekorateurs je nach Szenario geändert werden.

Wenn React in der tatsächlichen Entwicklung in Kombination mit der Redux-Bibliothek verwendet wird, ist es häufig erforderlich, es wie folgt zu schreiben.

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

Mit dem Dekorator können Sie den obigen Code umschreiben.

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

Klassenmethodendekorator

Klassenmethodendekorator wird verwendet, um die Methode der Klasse zu dekorieren

Parameter der Klassenmethode

Dekorationsgerät Modifizierte Klassenmethoden sind statische Methoden: Ziel ist der Konstruktor der Klasse. Die vom Dekorator geänderte Klassenmethode ist eine Instanzmethode: Ziel ist das Prototypobjekt der Klasse. Methode: Der Name der geänderten Klasse Methode: Attributdeskriptor des geänderten Mitglieds Methode und die statische Methode staticMethod bzw. Die Funktion des @log-Dekorators besteht darin, console.log auszuführen, um das Protokoll auszugeben, bevor der ursprüngliche Vorgang ausgeführt wird.

Übergabe von Parametern an Klassenmethoden-Dekoratoren

Der oben implementierte Dekorator kann bei Verwendung des Dekorators nicht in Parametern übergeben werden. Sie können eine Funktionsebene außerhalb des Dekorators kapseln

// descriptor对象原来的值如下
{
  value: specifiedFunction,
  enumerable: false,
  configurable: true,
  writable: true
};

Der im obigen Code implementierte Dekorator kann bei Verwendung Parameter übergeben, sodass das Verhalten des Dekorators je nach Szenario geändert werden kann.

• Die Ausführungsreihenfolge von Klassendekoratoren und Klassenmethodendekoratoren

• Wenn ein Dekorator gleichzeitig zum Dekorieren einer Klasse und einer Klassenmethode in einer Klasse verwendet wird, lautet die Ausführungsreihenfolge der Dekoratoren: Führen Sie die Klassenmethode aus Zuerst den Dekorator und dann den Klassendekorator ausführen.

Wenn es mehrere Dekoratoren für dieselbe Klasse oder dieselbe Klassenmethode gibt, ist es so, als würde man eine Zwiebel schälen, zuerst von außen nach innen eingeben und dann von innen nach außen ausführen.

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;
}

• 如上面代码中，会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2)，执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)

  上面代码中的类方法装饰器中，外层装饰器 @decoratorMethods(1) 先进入，但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。

  利用装饰器实现AOP切面编程

  function log(target, name, descriptor) {
      var oldValue = descriptor.value;
  
      descriptor.value = function () {
          console.log(`Calling "${name}" with`, arguments);
          return oldValue.apply(null, arguments);
      }
      return descriptor;
  }
  
  // 日志应用
  class Maths {
      @log
      add(a, b) {
          return a + b;
      }
  }
  const math = new Maths();
  // passed parameters should get logged now
  math.add(2, 4);

  【相关推荐：javascript视频教程、web前端】