Le modificateur est-il une fonctionnalité d'es6 ou d'es7 ?

Les modificateurs sont une fonctionnalité es7. Le modificateur est une syntaxe liée aux classes introduite par ES7. Elle est utilisée pour annoter ou modifier des classes et des méthodes de classe. Elle s'appuie sur la méthode "Object.defineProperty" d'ES5 et est écrite sous la forme "@function name" dans laquelle elle peut être injectée. les classes, les méthodes et les paramètres d'attribut sont utilisés 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 7, ordinateur Dell G3.

Qu'est-ce qu'un décorateur

Decorator est une syntaxe d'ES7. Il s'agit d'une syntaxe liée aux classes qui est utilisée pour annoter ou modifier des classes et des méthodes de classe.

Son apparence peut résoudre deux problèmes :

• Partage de méthodes entre différentes classes

• Changement du comportement des classes et des méthodes lors de la compilation

Modificateur Une fonction wrapper s'écrit @函数名. Il peut être placé avant la définition des classes et des méthodes de classe et peut être utilisé pour fournir des fonctionnalités supplémentaires aux classes, propriétés ou fonctions.

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

Au total, quatre décorateurs sont utilisés ci-dessus, l'un est utilisé dans la classe elle-même et les trois autres sont utilisés dans les méthodes de classe.

Decorator (Decorator) n'est pas un concept nouveau. D'autres langages tels que Java, Python, etc. existent depuis longtemps. Le décorateur (Decorator) dans ES7 s'inspire des méthodes d'écriture d'autres langages, mais. s'appuie sur la méthode ES5.

Modification de classe

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

@testable est un décorateur, qui modifie le comportement de la classe MyTestableClass et y ajoute l'attribut statique isTestable. Le paramètre cible de la fonction testable est la classe MyTestableClass elle-même.

@decorator
class A {}

// 等同于

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

En d'autres termes, un décorateur est une fonction qui traite une classe. Le premier paramètre de la fonction décorateur est la classe cible à décorer.

Si vous souhaitez ajouter plusieurs paramètres, vous pouvez encapsuler une couche de fonctions en dehors du décorateur.

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

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf

L'exemple ci-dessus consiste à ajouter un attribut statique à la classe.
Si vous souhaitez ajouter des attributs d'instance, vous pouvez opérer via l'objet Prototype de la classe cible.

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

// main.js
import { mixins } from './mixins'

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

@mixins(Foo)
class MyClass {}

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

Dans le 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 les décorateurs, vous pouvez réécrire le code ci-dessus.

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

Notez que le décorateur modifie le comportement de la classe. Cela se produit lorsque le code est compilé, et non au moment de l'exécution. Cela signifie que le décorateur peut exécuter le code pendant la phase de compilation. En d’autres termes, le décorateur est essentiellement une fonction exécutée au moment de la compilation.

Modification de la méthode

class Person {
  // 用来装饰”类“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

La fonction décorateur en lecture seule peut accepter un total de trois paramètres.

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 类似于
Object.defineProperty(Person.prototype, 'name', descriptor);

• Le premier paramètre du décorateur est l'objet prototype de la classe. L'exemple ci-dessus est Person.prototype. L'intention initiale du décorateur est de "décorer" l'instance de la classe, mais l'instance n'a pas été générée. pour le moment, il ne peut donc que décorer le prototype. (Ceci est différent de la décoration de classe, auquel cas le paramètre target fait référence à la classe elle-même)
• Le deuxième paramètre est le nom de l'attribut à décorer
• Le troisième Le paramètre est l'objet de description de l'attribut

Le décorateur Il a également la fonction d'annotation. Par exemple, on peut voir d'un coup d'œil que la méthode de nom ci-dessus est en lecture seule.

En plus des annotations, les décorateurs peuvent également être utilisés pour la vérification du type. Ainsi, pour les cours, cette fonctionnalité est très utile. À long terme, ce sera un outil important pour l’analyse statique du code JavaScript. Il est pris en charge en tant que fonctionnalité expérimentale dans TypeScript.

Pourquoi les décorateurs ne peuvent pas être utilisés pour les fonctions

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

var counter = 0;

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

@add
function foo() {}

Le code ci-dessus veut que le compteur soit égal à 1 après l'exécution, mais le résultat réel est que le compteur est égal à 0. En raison de la promotion de la fonction, le code réellement exécuté est le suivant.

@add
function foo() {
}

var counter;
var add;

counter = 0;

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

En bref, du fait de l'existence de fonctions de levage, les décorateurs ne peuvent pas être utilisés pour des fonctions. Les cours ne seront pas promus, il n'y a donc aucun problème à cet égard.

core-decorators.js

[core-decorators.js]() est un module tiers qui fournit plusieurs décorateurs courants.

• @autobind : Rend l'objet this dans la méthode lié à l'objet d'origine
• @readonly : Rend la propriété ou la méthode non inscriptible.
• @override : Vérifiez si la méthode de la sous-classe remplace correctement la méthode du même nom de la classe parent. Si elle est incorrecte, une erreur sera signalée.
• @deprecate (alias @deprecated) : affiche un avertissement dans la console indiquant que la méthode sera obsolète.

【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!