Comment comprendre les décorateurs es6

Dans es6, le modèle de décorateur est une théorie de conception qui étend dynamiquement les fonctions d'un objet sans changer la classe d'origine et en utilisant l'héritage ; l'essence du décorateur est une fonction ordinaire utilisée pour étendre les attributs de classe et la méthode des classes. Avantages de l'utilisation de décorateurs : 1. Le code devient plus lisible et le nom du décorateur est équivalent à un commentaire 2. Les fonctions d'origine peuvent être étendues sans modifier le code d'origine ;

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

Comment comprendre Decorator dans ES6 ?

Decorator, dont le nom nous rappelle facilement le modèle de décorateur

En termes simples, le modèle de décorateur est un moyen d'étendre dynamiquement un objet sans changer la classe d'origine et en utilisant la théorie de la conception fonctionnelle.

Il en va de même pour la fonction Décorateur dans ES6. Son essence n'est pas une structure haut de gamme, c'est juste une fonction ordinaire utilisée pour étendre les attributs de classe et les méthodes de classe

Un soldat est défini ici, et il n'a aucun équipement. à ce moment

class soldier{ 
}

Définir une fonction pour obtenir l'équipement AK, c'est-à-dire le décorateur

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

Utiliser le décorateur pour améliorer le soldat

@strong
class soldier{
}

Le soldat a maintenant une arme

soldier.AK // true

Bien que le code ci-dessus soit simple, vous pouvez voir clairement l'utilisation de Decorator (décoration) Deux avantages majeurs :

• Le code devient plus lisible, et le nom du décorateur équivaut à un commentaire

• Agrandir la fonction d'origine sans changer le code d'origine

Décoration L'utilisation de l'outil

Docorator Les objets modifiés sont les deux types suivants:

• Décoration de classe

• Décoration d'attribut de classe

Décoration de classe

Lors de la décoration de la classe elle-même, il peut accepter un paramètre, c'est-à-dire la classe elle-même

Décomposez le comportement du décorateur, et tout le monde peut avoir une compréhension plus profonde

@decorator
class A {}

// 等同于

class A {}
A = decorator(A) || A;

Ce qui suit@testable est un décorateur, et la cible est la classe entrante, qui est MyTestableClass, qui implémente l'ajout à la classe Attributs statiques

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

Si vous souhaitez transmettre des paramètres, vous pouvez encapsuler une couche de fonctions en dehors du décorateur

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

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

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

Décoration des attributs de classe

Lors de la décoration des attributs de classe, vous pouvez accepter trois paramètres :

• L'objet prototype de la classe

• Le nom de l'attribut qui doit être décoré

• L'objet de description du nom de l'attribut décoré

Définissez d'abord un décorateur en lecture seule

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

Utilisez la lecture seule pour décorer la méthode du nom de la classe

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

C'est équivalent à L'appel suivant

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

Si une méthode a plusieurs décorateurs, tout comme un oignon, elle entre d'abord de l'extérieur vers l'intérieur, puis s'exécute de l'intérieur vers l'extérieur

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

Le décorateur externe @dec(1) entre en premier, mais la couche interne Le décorateur @dec(2) est exécuté en premier

Remarque

Le décorateur ne peut pas être utilisé pour décorer des fonctions, car la fonction a des déclarations de variables

var counter = 0;

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

@add
function foo() {
}

Dans la phase de compilation, cela devient ce qui suit

var counter;
var add;

@add
function foo() {
}

counter = 0;

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

L'intention est de contrer après exécution Égal à 1, mais le résultat réel est que le compteur est égal à 0

Scénarios d'utilisation du décorateur

Basé sur le rôle puissant de Decorator, nous pouvons répondre aux besoins de divers scénarios. En voici quelques-uns simples :

Utilisez React - Lorsque vous utilisez Redux, si vous l'écrivez sous la forme suivante, c'est à la fois inesthétique et gênant

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

Cela devient beaucoup plus simple grâce aux décorateurs

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

Les mixins peuvent également être écrits en tant que décorateurs, ce qui rend leur utilisation plus concise

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

// 使用
const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"

Parlons de plusieurs décorateurs courants dans core-decorators.js

@antobind

le décorateur autobind crée cet objet dans la méthode, lier l'objet d'origine

@readonly

le décorateur en lecture seule rend la propriété ou la méthode n'est pas accessible en écriture

import { autobind } from 'core-decorators';

class Person {
  @autobind
  getPerson() {
    return this;
  }
}

let person = new Person();
let getPerson = person.getPerson;

getPerson() === person;
// true

@deprecate

Le décorateur obsolète ou obsolète affiche un avertissement dans la console indiquant que la méthode sera obsolète

import { readonly } from 'core-decorators';

class Meal {
  @readonly
  entree = 'steak';
}

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

[Recommandations associées :

tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!