当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript装饰器模式全解析

JavaScript装饰器模式全解析

2025-12-02 22:42:04 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript装饰器模式详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

装饰器模式通过函数动态扩展对象功能而不修改原代码。在 TypeScript 中，使用 @decorator 语法可对类、方法、属性、参数进行增强，如 Injectable 注册服务、Log 记录日志、Required 标记必填字段、QueryParam 识别参数用途，广泛用于权限控制、缓存、校验和依赖注入等场景。

JavaScript装饰器模式_Decorator使用

装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许你动态地给对象添加新功能，而不需要修改原有的代码。在 JavaScript 中，装饰器提供了一种优雅的方式来扩展类或方法的行为，尤其在 TypeScript 和现代框架（如 Angular、React + Babel 装饰器支持）中被广泛使用。

什么是装饰器（Decorator）

装饰器本质上是一个函数，用来“包装”或“增强”类、方法、属性或参数。它通过在定义时使用 @decoratorName 语法来应用，属于元编程的一种方式。

目前装饰器是 JavaScript 的提案功能，在 TypeScript 或使用 Babel 等工具的项目中可以启用。标准尚未完全定稿，但已被广泛应用。

装饰器的基本语法与类型

装饰器可以应用于以下几个位置：

类装饰器：作用于整个类
方法装饰器：作用于类的方法
属性装饰器：作用于类的属性
参数装饰器：作用于方法的参数

示例：启用装饰器（TypeScript 配置）

在 tsconfig.json 中启用实验性装饰器：

{
  "compilerOptions": {
    "target": "ES2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

实际应用示例

1. 类装饰器：自动注册类

用于标记某个类为可注入服务或组件。

function Injectable(target: Function) {
  console.log('类已注册为可注入:', target.name);
}

@Injectable
class UserService {
  getName() {
    return 'Alice';
  }
}

// 输出：类已注册为可注入: UserService

2. 方法装饰器：日志记录

在方法执行前后打印日志，常用于调试或监控。

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`调用方法: ${propertyKey}，参数:`, args);
    const result = originalMethod.apply(this, args);
    console.log(`方法返回值:`, result);
    return result;
  };

  return descriptor;
}

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

const calc = new Calculator();
calc.add(2, 3);
// 输出：
// 调用方法: add，参数: [2, 3]
// 方法返回值: 5

3. 属性装饰器：标记字段

常用于 ORM 或表单验证场景。

function Required(target: Object, propertyKey: string) {
  console.log(`字段必填: ${propertyKey}`);
}

class LoginForm {
  @Required
  username!: string;
  password!: string;
}
// 输出：字段必填: username

4. 参数装饰器：标识参数用途

function QueryParam(target: Object, methodName: string, paramIndex: number) {
  console.log(`参数 ${paramIndex} 是查询参数，属于方法 ${methodName}`);
}

class UserController {
  getUsers(@QueryParam page: number, limit: number) {
    // 模拟分页请求
  }
}
// 输出：参数 0 是查询参数，属于方法 getUsers