Résumé de l'utilisation de la fonction de décoration JavaScript

Cet article résume l'utilisation et les points de connaissance pertinents des fonctions de décorateur JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans ES6, des définitions et opérations associées d'objets de classe (telles que class et extends) ont été ajoutées, ce qui nous permet de partager ou d'étendre plus facilement certaines méthodes ou comportements entre plusieurs classes différentes. À l’heure actuelle, nous avons besoin d’une méthode plus élégante pour nous aider à accomplir ces choses.

Qu'est-ce qu'un décorateur

Décorateur Python

En orienté objet (POO) Parmi les modèles de conception, le décorateur est appelé le modèle de décoration. Le mode de décoration de la POO doit être implémenté par héritage et combinaison, et Python, en plus de prendre en charge les décorateurs de la POO, prend également en charge les décorateurs directement à partir du niveau syntaxique.

Si vous connaissez python, vous le connaîtrez. Voyons donc d’abord à quoi ressemble un décorateur en python :

def decorator(f):
  print "my decorator"
  return f
@decorator
def myfunc():
  print "my function"
myfunc()
# my decorator
# my function

Le @decorator voici ce qu’on appelle le décorateur. Dans le code ci-dessus, nous utilisons le décorateur pour imprimer une ligne de texte avant d'exécuter notre méthode cible, et n'apportons aucune modification à la méthode d'origine. Le code est fondamentalement équivalent à :

def decorator(f):
  def wrapper():
    print "my decorator"
    return f()
  return wrapper
def myfunc():
  print "my function"
myfunc = decorator(myfuc)

Il n'est pas difficile de voir à partir du code que le décorateur reçoit un paramètre, qui est la méthode cible dans laquelle nous sommes décorés, et renvoie un. méthode pour Lorsqu'il est appelé ultérieurement, l'accès à l'objet méthode d'origine est également perdu. Lorsque nous appliquons une décoration à une fonction, nous modifions en fait la référence d'entrée de la méthode décorée afin qu'elle pointe vers le point d'entrée de la méthode renvoyée par le décorateur, nous permettant ainsi d'étendre et de modifier la fonction d'origine.

Décorateur ES7

Le décorateur d'ES7 s'appuie également sur ce sucre de syntaxe, mais s'appuie sur la méthode ES5 Object.defineProperty.

Object.defineProperty

La méthode Object.defineProperty() définira directement une nouvelle propriété sur un objet, ou modifiera une propriété existante d'un objet. et renvoie cet objet.

Cette méthode permet d'ajouter ou de modifier précisément les propriétés de l'objet. Les propriétés ordinaires ajoutées par affectation créent des propriétés qui sont exposées lors de l'énumération des propriétés (méthodes for...in ou Object.keys), et ces valeurs peuvent être modifiées ou supprimées. Cette approche permet de modifier ces détails supplémentaires par rapport aux valeurs par défaut. Par défaut, les valeurs de propriété ajoutées à l'aide de Object.defineProperty() sont immuables.

Syntaxe

Object.defineProperty(obj, prop, descriptor)

1. obj : L'objet sur lequel les propriétés doivent être définies.

2. prop : Le nom de la propriété à définir ou à modifier.

3. descripteur : Le descripteur d'attribut à définir ou à modifier.

4. Valeur de retour : L'objet passé à la fonction.

Dans ES6, en raison de la particularité du type Symbol, l'utilisation d'une valeur de type Symbol comme clé d'un objet est différente de la définition ou modification conventionnelle, et Object.defineProperty définit le key as Symbol Une des méthodes d'attribut.

Descripteur d'attribut

Il existe deux formes principales de descripteurs d'attribut existant actuellement dans les objets : les descripteurs de données et les descripteurs d'accès.

Un descripteur de données est une propriété avec une valeur qui peut ou non être inscriptible.

• Les descripteurs d'accès sont des propriétés décrites par des paires de fonctions getter-setter.

• Le descripteur doit être l'une de ces deux formes, pas les deux ;

Le descripteur de données et le descripteur d'accès ont les valeurs de clé facultatives suivantes :

configurable

si et seulement Quand le configurable de la propriété est vrai, le descripteur de propriété peut être modifié et la propriété peut également être supprimée de l'objet correspondant. La valeur par défaut est fausse.

enumerable

enumerable définit si les propriétés d'un objet peuvent être énumérées dans les boucles for...in et Object.keys().

Si et seulement si l'énumérable de la propriété est vrai, la propriété peut apparaître dans la propriété d'énumération de l'objet. La valeur par défaut est fausse. Le descripteur de données
a également les valeurs clés facultatives suivantes :

valeur

La valeur correspondant à cet attribut. Il peut s'agir de n'importe quelle valeur JavaScript valide (nombre, objet, fonction, etc.). La valeur par défaut n'est pas définie.

writable

Si et seulement si l'écriture de la propriété est vraie, la valeur peut être modifiée par l'opérateur d'affectation. La valeur par défaut est fausse.

Le descripteur d'accès a également les valeurs clés facultatives suivantes :

get

Une méthode qui fournit un getter pour la propriété, ou s'il existe pas de getter indéfini. La valeur de retour de cette méthode est utilisée comme valeur d'attribut. La valeur par défaut n'est pas définie.

set

Une méthode qui fournit un setter pour une propriété, ou indéfini s'il n'y a pas de setter. Cette méthode acceptera un paramètre unique et attribuera la nouvelle valeur de ce paramètre à la propriété. La valeur par défaut n'est pas définie.

Si un descripteur n'a aucun des mots-clés value, writable, get et set, alors il sera considéré comme un descripteur de données. Si un descripteur contient à la fois les mots-clés (value ou writable) et (get ou set), une exception sera générée.
Utilisation

类的装饰

@testable
class MyTestableClass {
 // ...
}

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

MyTestableClass.isTestable // true

上面代码中，@testable 就是一个装饰器。它修改了 MyTestableClass这 个类的行为，为它加上了静态属性isTestable。testable 函数的参数 target 是 MyTestableClass 类本身。

基本上，装饰器的行为就是下面这样。

@decorator
class A {}

// 等同于

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

也就是说，装饰器是一个对类进行处理的函数。装饰器函数的第一个参数，就是所要装饰的目标类。

如果觉得一个参数不够用，可以在装饰器外面再封装一层函数。

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

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

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

上面代码中，装饰器 testable 可以接受参数，这就等于可以修改装饰器的行为。

注意，装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。

前面的例子是为类添加一个静态属性，如果想添加实例属性，可以通过目标类的 prototype 对象操作。

下面是另外一个例子。

// mixins.js
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'

上面代码通过装饰器 mixins，把Foo对象的方法添加到了 MyClass 的实例上面。

方法的装饰

装饰器不仅可以装饰类，还可以装饰类的属性。

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

上面代码中，装饰器 readonly 用来装饰“类”的name方法。

装饰器函数 readonly 一共可以接受三个参数。

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

• 装饰器第一个参数是 类的原型对象，上例是 Person.prototype，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时target参数指的是类本身）；

• 第二个参数是 所要装饰的属性名

• 第三个参数是 该属性的描述对象
  

另外，上面代码说明，装饰器（readonly）会修改属性的 描述对象（descriptor），然后被修改的描述对象再用来定义属性。

函数方法的装饰

装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

另一方面，如果一定要装饰函数，可以采用高阶函数的形式直接执行。

function doSomething(name) {
 console.log('Hello, ' + name);
}

function loggingDecorator(wrapped) {
 return function() {
  console.log('Starting');
  const result = wrapped.apply(this, arguments);
  console.log('Finished');
  return result;
 }
}

const wrapped = loggingDecorator(doSomething);

core-decorators.js

core-decorators.js是一个第三方模块，提供了几个常见的装饰器，通过它可以更好地理解装饰器。

@autobind

autobind 装饰器使得方法中的this对象，绑定原始对象。

@readonly

readonly 装饰器使得属性或方法不可写。

@override

override 装饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。

import { override } from 'core-decorators';

class Parent {
 speak(first, second) {}
}

class Child extends Parent {
 @override
 speak() {}
 // SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}

// or

class Child extends Parent {
 @override
 speaks() {}
 // SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
 //
 //  Did you mean "speak"?
}

@deprecate (别名@deprecated)

deprecate 或 deprecated 装饰器在控制台显示一条警告，表示该方法将废除。

import { deprecate } from 'core-decorators';

class Person {
 @deprecate
 facepalm() {}

 @deprecate('We stopped facepalming')
 facepalmHard() {}

 @deprecate('We stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' })
 facepalmHarder() {}
}

let person = new Person();

person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.

person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming

person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
//   See http://knowyourmeme.com/memes/facepalm for more details.
//

@suppressWarnings

suppressWarnings 装饰器抑制 deprecated 装饰器导致的 console.warn() 调用。但是，异步代码发出的调用除外。

使用场景

装饰器有注释的作用

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

有了装饰器，就可以改写上面的代码。装饰

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

相对来说，后一种写法看上去更容易理解。

新功能提醒或权限

菜单点击时，进行事件拦截，若该菜单有新功能更新，则弹窗显示。

/**
 * @description 在点击时，如果有新功能提醒，则弹窗显示
 * @param code 新功能的code
 * @returns {function(*, *, *)}
 */
 const checkRecommandFunc = (code) => (target, property, descriptor) => {
  let desF = descriptor.value; 
  descriptor.value = function (...args) {
   let recommandFuncModalData = SYSTEM.recommandFuncCodeMap[code];

   if (recommandFuncModalData && recommandFuncModalData.id) {
    setTimeout(() => {
     this.props.dispatch({type: 'global/setRecommandFuncModalData', recommandFuncModalData});
    }, 1000);
   }
   desF.apply(this, args);
  };
  return descriptor;
 };

loading

在 React 项目中，我们可能需要在向后台请求数据时，页面出现 loading 动画。这个时候，你就可以使用装饰器，优雅地实现功能。

@autobind
@loadingWrap(true)
async handleSelect(params) {
 await this.props.dispatch({
  type: 'product_list/setQuerypParams',
  querypParams: params
 });
}

loadingWrap 函数如下：

export function loadingWrap(needHide) {

 const defaultLoading = (
  <p className="toast-loading">
   <Loading className="loading-icon"/>
   <p>加载中...</p>
  </p>
 );

 return function (target, property, descriptor) {
  const raw = descriptor.value;
  
  descriptor.value = function (...args) {
   Toast.info(text || defaultLoading, 0, null, true);
   const res = raw.apply(this, args);
   
   if (needHide) {
    if (get(&#39;finally&#39;)(res)) {
     res.finally(() => {
      Toast.hide();
     });
    } else {
     Toast.hide();
    }
   }
  };
  return descriptor;
 };
}

问题：这里大家可以想想看，如果我们不希望每次请求数据时都出现 loading，而是要求只要后台请求时间大于 300ms 时，才显示loading，这里需要怎么改？

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！

相关推荐：

php公益培训视频教程

JavaScript图文教程

JavaScript在线手册

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!