A quoi servent les modificateurs es6 ?

Dans es6, les décorateurs sont utilisés pour annoter ou modifier des classes et des méthodes de classe, en s'appuyant sur la méthode "Object.defineProperty" d'ES5, écrite sous la forme "@function name" le décorateur est en fait une fonction, généralement placée dans les classes et les classes au premier plan ; de la méthode. Des modificateurs peuvent être injectés dans des classes, des méthodes et des paramètres d'attribut pour étendre les fonctions des classes, des attributs, des méthodes et des paramètres.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Decorator Pattern permet d’ajouter de nouvelles fonctionnalités à un objet existant sans modifier sa structure. Ce type de modèle de conception est un modèle structurel, qui agit comme un wrapper autour d’une classe existante.

Ce modèle crée une classe de décoration pour envelopper la classe d'origine et fournir des fonctionnalités supplémentaires tout en conservant l'intégrité de la signature de la méthode de classe.

ES6 Decorator (Decorator)

Dans ES6, decorator (Decorator) est une syntaxe liée à la classe utilisée pour annoter ou modifier des classes et des méthodes de classe.

Un décorateur est en fait une fonction, généralement placée devant les classes et les méthodes de classe.

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

Deux décorateurs sont utilisés dans le code ci-dessus. Le décorateur @decorateClass() est utilisé sur la classe elle-même pour ajouter ou modifier les fonctionnalités de la classe ; Méthode de classe, utilisée pour annoter ou modifier les méthodes de classe.

Deux types de décorateurs (décorateurs)

Les décorateurs ne peuvent être utilisés que pour les classes et les méthodes de classe, pas pour les fonctions en raison de la promotion des fonctions.

Les décorateurs ne peuvent être utilisés que pour les classes et les méthodes de classe. Examinons respectivement l'utilisation de deux types de décorateurs

Décorateurs de classe

Les décorateurs de classe sont utilisés pour décorer toute la classe

Décorateurs de classe Le paramètre

target : la classe elle-même est également équivalente au constructeur de la classe : Class.prototype.constructor.

@decorateClass
class Example {
    //...
}

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

Comme dans le code ci-dessus, le décorateur @decorateClass modifie le comportement de toute la classe Exemple et ajoute un attribut statique isTestClass à la classe Exemple. Le décorateur est une fonction. Le paramètre cible dans la fonction decorClass est la classe Exemple elle-même, qui est également équivalente au constructeur de classe Exemple.prototype.constructor.

Le décorateur passe les paramètres

Le décorateur implémenté ci-dessus ne peut pas être utilisé. lors de son utilisation. Si vous souhaitez transmettre des paramètres lors de l'utilisation d'un décorateur, vous pouvez encapsuler une couche de fonctions en dehors du décorateur

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

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

Le décorateur implémenté dans le code ci-dessus peut transmettre des paramètres lorsqu'il est utilisé. Ainsi, le comportement du décorateur peut être modifié selon différents scénarios.

En développement réel, lorsque React est utilisé en combinaison avec la bibliothèque Redux, il est souvent nécessaire de l'écrire comme suit.

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

Avec la décoratrice, vous pouvez réécrire le code ci-dessus. "Décorateur de méthode de classe"

Dispositif de décoration classe modifiée les méthodes sont des méthodes statiques : target est le constructeur de la classe

La méthode de classe modifiée par le décorateur est une méthode d'instance : target est l'objet prototype de la classe

méthode : le nom de la méthode de classe modifiée

descriptor : Descripteur d'attribut du membre modifié

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

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

Comme dans le code ci-dessus, le décorateur @log décore la méthode d'instance instanceMethod et le static méthode staticMethod respectivement . La fonction du décorateur @log est d'exécuter console.log pour afficher le journal avant d'effectuer l'opération d'origine.

• Passer des paramètres aux décorateurs de méthodes de classe

• Le décorateur implémenté ci-dessus ne peut pas être transmis en paramètres lorsqu'il est utilisé. Si vous souhaitez transmettre des paramètres lors de l'utilisation du décorateur, vous pouvez encapsuler une couche de fonctions en dehors du décorateur

.

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

Le décorateur implémenté dans le code ci-dessus peut transmettre des paramètres lorsqu'il est utilisé, de sorte que le comportement du décorateur puisse être modifié selon différents scénarios.

L'ordre d'exécution des décorateurs de classe et des décorateurs de méthode de classe

Si un décorateur est utilisé pour décorer une classe et une méthode de classe en même temps dans une classe, alors l'ordre d'exécution des décorateurs est : exécuter la méthode de classe décorateur d'abord, puis exécutez le décorateur de classe.

Si la même classe ou la même méthode de classe a plusieurs décorateurs, ce sera comme éplucher un oignon, entrer d'abord de l'extérieur vers l'intérieur, puis exécuter de l'intérieur vers l'extérieur.

class Example {
    @log(1)
    instanceMethod() { }

    @log(2)
    static staticMethod() { }
}

function log(id) {
    return (target, methodName, descriptor) => {
    const oldValue = descriptor.value;

    descriptor.value = function() {
      console.log(`Calling ${name} with`, arguments, `this id is ${id}`);
      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前端】