探秘 JS 装饰器：开启编程的新视野

2023-10-09 03:39:23

装饰器（decorator）是一种设计模式，它允许您在不修改类或类属性的基础上扩展其功能。在 JavaScript 中，装饰器通过在类、属性或方法声明之前使用 @method 来实现。

类装饰器

类装饰器可以用来修改整个类。例如，我们可以用它来为类添加元数据，或者在类实例化之前做一些特殊处理。

// 类装饰器示例
function LogClass(target) {
  console.log(`类名：${target.name}`);
}

@LogClass
class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person('John');

在上面的示例中，LogClass 装饰器在类 Person 被实例化之前将其名称记录到控制台。

属性装饰器

属性装饰器可以用来修改类的属性。例如，我们可以用它来添加数据验证，或者在属性被访问或修改时做一些特殊处理。

// 属性装饰器示例
function Required(target, propertyKey) {
  const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);

  // 检查属性值是否为必填项
  if (descriptor.required === undefined) {
    descriptor.required = true;
  }
}

class Person {
  @Required
  name;

  constructor(name) {
    this.name = name;
  }
}

const person = new Person('John');

在上面的示例中，Required 装饰器在属性 name 被访问或修改时检查其值是否为必填项。如果值为 undefined 或 null，则抛出错误。

方法装饰器

方法装饰器可以用来修改类的方法。例如，我们可以用它来记录方法的执行时间，或者在方法执行前后做一些特殊处理。

// 方法装饰器示例
function LogMethod(target, propertyKey, descriptor) {
  // 获取原始方法
  const originalMethod = descriptor.value;

  // 用装饰器包装原始方法
  descriptor.value = function (...args) {
    console.log(`方法名：${propertyKey}`);
    console.log(`参数：${args}`);

    // 调用原始方法
    const result = originalMethod.apply(this, args);

    console.log(`返回值：${result}`);

    return result;
  };
}

class Person {
  @LogMethod
  greet(name) {
    return `Hello, ${name}!`;
  }
}

const person = new Person();
person.greet('John');