JavaScript 实战：ECMAScript 2021 中的装饰器功能应用-JavaScript中文网-JavaScript教程资源分享门户

介绍

ECMAScript2021 中引入了装饰器功能，这是一个可以用于修改类和其方法的方法，常常被用于增强或修改类或对象的功能。它能够帮助开发者节省不少时间和代码，同时也能够提高代码的可维护性和扩展性。

装饰器的语法

装饰器是一个包装器函数，它的语法形式如下：

@decorator
class MyClass {}

装饰器函数必须是一个函数，可以接收一个或多个参数。这里的 @decorator 就是装饰器，它是通过将一个函数放在 @ 符号之前来定义的。

在类中，装饰器可以用来修饰类、属性或方法。例如：

@decorator
class MyClass {
  @readonly
  property = 123;

  @log
  foo() {}
}

装饰器的应用

类装饰器

类装饰器可以用来修改类的行为。常常用于扩展类的功能和属性，例如 vue-class-component 就是一个常用的类装饰器，它用于将 Vue 组件转换为类。

下面是一个简单的类修饰器示例：

function log(target) {
  // 打印类名
  console.log(`Class name: ${target.name}`);
}

@log
class MyClass {}

在这个示例中，我们定义了一个装饰器 log，用于在类定义的时候记录类名。当我们将这个装饰器应用在 MyClass 类上时，它就会在类的声明时输出类名。

属性装饰器

属性装饰器可以用来修饰类的属性，比如添加属性的访问器（getter 和 setter）以及属性的默认值等。

function readonly(target, key, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class MyClass {
  @readonly
  property = 123;
}

在这个示例中，我们定义了一个装饰器 readonly，用于将类属性设为只读。当我们使用 @readonly 装饰 property 属性时，它就会被设置为只读属性，不能修改。

方法装饰器

方法装饰器可以用来修改类中的方法，例如添加或删除方法，或者修改方法的行为。

function validate(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    if (args.length === 0 || !args[0]) {
      throw new Error(`Invalid parameter`);
    }

    return original.apply(this, args);
  };

  return descriptor;
}

class MyClass {
  @validate
  foo(param) {
    console.log(`Hello ${param}!`);
  }
}

在这个示例中，我们定义了一个装饰器 validate，用于验证调用方法的参数。当我们使用 @validate 装饰 foo 方法时，它就会在方法调用前先验证参数的合法性。

总结

本文介绍了 JavaScript 中的装饰器功能，包括装饰器的语法以及它在类、属性和方法中的应用。装饰器可以帮助开发者在不改变传统代码结构的情况下增加代码的可维护性和可扩展性，我们应该尝试使用它来提高代码的质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ab81fdadd4f0e0ff5290b9