JavaScript装饰器模式全解析

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

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

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

什么是装饰器（Decorator）

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

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

装饰器的基本语法与类型

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

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

在 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

装饰器的实际用途

装饰器在现代前端开发中有多种实用场景：

• 权限控制：在方法上加 @Auth 装饰器，检查用户权限
• 缓存结果：@Cache 装饰器避免重复计算或请求
• 性能监控：@Timer 记录方法执行时间
• 数据校验：配合 class-validator 使用 @IsEmail、@MinLength 等
• 依赖注入：在 Angular 中用 @Injectable() 注册服务

基本上就这些。装饰器让代码更清晰、复用性更高，把横切关注点（如日志、权限）从核心逻辑中解耦出来。虽然原生 JavaScript 还未正式支持，但在工程化项目中已经非常实用。关键是理解其执行时机和目标对象的处理方式，避免副作用。

文中关于JavaScript,TypeScript,功能扩展,装饰器模式,@decorator的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript装饰器模式全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。