JavaScript装饰器模式_类与方法的装饰实践-js教程-PHP中文网

JavaScript装饰器模式_类与方法的装饰实践

幻影之瞳

发布： 2025-11-25 16:08:02

原创

346人浏览过

装饰器模式通过元编程动态扩展对象功能，如在JavaScript中使用类装饰器记录类创建、方法装饰器添加日志，实现权限校验、性能监控等横切关注点，无需修改原有代码。

javascript装饰器模式_类与方法的装饰实践

装饰器模式是一种在不修改原有代码的前提下，动态扩展对象功能的设计模式。在 JavaScript 中，借助 ES6 的类和 TypeScript 提供的装饰器语法（目前处于提案阶段，但广泛用于框架如 Angular），我们可以非常直观地实现类与方法的装饰。这种模式特别适用于日志记录、权限校验、性能监控等横切关注点。

类装饰器：增强整个类的行为

类装饰器接收构造函数作为唯一参数，可以用来监听、修改或替换类的定义。

例如，我们想为某个类标记其是否已启用，可以通过类装饰器实现：

function logClass(target: Function) {
  console.log('类已创建:', target.name);
}

@logClass
class Person {
  constructor(public name: string) {}
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

当定义 Person 类时，装饰器会立即执行，输出“类已创建: Person”。这适合做注册、元数据注入或行为拦截。

立即学习“Java免费学习笔记（深入）”；

方法装饰器：控制单个方法的调用逻辑

方法装饰器应用于类的方法，它接收三个参数：目标对象、方法名、属性描述符。通过修改描述符，可以改变方法的行为。

Levity

AI帮你自动化日常任务

206

查看详情

常见的使用场景包括防抖、日志追踪、权限检查等。

function readonly(target: any, key: string, descriptor: PropertyDescriptor) {
  descriptor.writable = false;
}

function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`调用方法: ${key}`, '参数:', args);
    return original.apply(this, args);
  };
}

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

上述代码中，@log 装饰器包裹了 add 方法，在调用前后打印日志，而不会影响原有逻辑。这种方式解耦了业务代码与辅助功能。