ES6 的 Decorator 解析：赋能类和类方法的装饰器语法

2024-02-16 22:38:51

ES6 Decorator 的语法解析

装饰器是一种特殊的函数，它接受一个类或类方法作为参数，并返回一个修改后的类或类方法。装饰器函数的语法如下：

function decorator(target) {
  // 修改类的逻辑
  return modifiedTarget;
}

装饰器函数可以通过 @ 符号应用到类或类方法上。例如，以下代码使用装饰器 @decorator 来修改类 ExampleClass：

@decorator
class ExampleClass {
  // 类成员
}

Decorator 的分类

ES6 中的装饰器可以分为两种类型：

类装饰器 ：用于修改整个类。
方法装饰器 ：用于修改类中的方法。

Decorator 的具体用法

类装饰器

类装饰器可以用来实现以下功能：

为类添加属性或方法。
修改类的构造函数。
拦截类的实例化过程。
修改类的原型对象。

以下是一个类装饰器的示例，它为类 ExampleClass 添加了一个 name 属性：

function addName(target) {
  target.prototype.name = "John Doe";
}

@addName
class ExampleClass {
  // 类成员
}

console.log(new ExampleClass().name); // 输出 "John Doe"

方法装饰器

方法装饰器可以用来实现以下功能：

修改方法的行为。
拦截方法的执行过程。
为方法添加参数或返回值类型注解。

以下是一个方法装饰器的示例，它为类 ExampleClass 的 sayHello 方法添加了一个参数类型注解：

function addParamType(target, propertyKey, descriptor) {
  descriptor.parameters = [[String]];
}

class ExampleClass {
  @addParamType
  sayHello(name) {
    console.log(`Hello, ${name}!`);
  }
}

new ExampleClass().sayHello("John Doe"); // 输出 "Hello, John Doe!"