JavaScript Decorators(装饰器)

预计阅读时间1 分 123 views

有时,我们需要为类或方法添加一些额外的逻辑,例如日志记录、性能统计、权限校验等等。装饰器可以用来实现这些功能,而无需修改原始代码结构。

一、装饰器的概念

装饰器本质上是一种函数,它可以用来修改类、方法、属性或参数的行为。装饰器接收被装饰的目标作为参数,并返回一个修改后的目标或一个新的函数。

简单来说,装饰器就像给你的代码添加了一些“装饰品”,让它看起来更漂亮,功能更强大。

二、类装饰器

类装饰器用于装饰整个类。它接收一个构造函数作为参数,并返回一个新的构造函数或原始构造函数。

用法:

function classDecorator(constructor: Function) {
  // 在这里添加你的装饰逻辑
  console.log(`正在装饰类:${constructor.name}`);

  // 返回修改后的构造函数或原始构造函数
  return constructor;
}

@classDecorator
class MyClass {
  // ...
}

在上面的例子中,@classDecorator 语法表示将 classDecorator 函数应用于 MyClass 类。

三、方法装饰器

方法装饰器用于装饰类中的某个方法。它接收三个参数:

  • target: 被装饰方法所在的类的原型对象。
  • propertyKey: 被装饰方法的名称。
  • descriptor: 被装饰方法的属性描述符。

用法:

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // 获取原始方法
  const originalMethod = descriptor.value;

  // 修改方法行为
  descriptor.value = function (...args: any[]) {
    console.log(`正在调用方法:${propertyKey}`);
    // 调用原始方法
    const result = originalMethod.apply(this, args);
    console.log(`方法执行完毕:${propertyKey}`);
    return result;
  };

  // 返回修改后的属性描述符
  return descriptor;
}

class MyClass {
  @methodDecorator
  myMethod(arg: string) {
    console.log(`方法参数:${arg}`);
  }
}

在上面的例子中,@methodDecorator 语法表示将 methodDecorator 函数应用于 MyClass 类的 myMethod 方法。

四、完整示例代码

function classDecorator(constructor: Function) {
  console.log(`正在装饰类:${constructor.name}`);
  return constructor;
}

function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`正在调用方法:${propertyKey}`);
    const result = originalMethod.apply(this, args);
    console.log(`方法执行完毕:${propertyKey}`);
    return result;
  };
  return descriptor;
}

@classDecorator
class MyClass {
  @methodDecorator
  myMethod(arg: string) {
    console.log(`方法参数:${arg}`);
  }
}

const instance = new MyClass();
instance.myMethod('Hello, world!');

运行以上代码,你将会在控制台中看到如下输出:

正在装饰类:MyClass
正在调用方法:myMethod
方法参数:Hello, world!
方法执行完毕:myMethod

通过装饰器,我们可以在不修改原始代码的情况下,轻松地为类和方法添加各种功能。这使得代码更加模块化、可读性更强,也更易于维护。

分享此文档

JavaScript Decorators(装饰器)

或复制链接

本页目录