装饰器模式通过函数动态扩展对象功能而不修改原代码。在 TypeScript 中，使用 @decorator 语法可对类、方法、属性、参数进行增强，如 Injectable 注册服务、Log 记录日志、Required 标记必填字段、QueryParam 识别参数用途，广泛用于权限控制、缓存、校验和依赖注入等场景。
装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许你动态地给对象添加新功能，而不需要修改原有的代码。在 JavaScript 中，装饰器提供了一种优雅的方式来扩展类或方法的行为，尤其在 TypeScript 和现代框架（如 Angular、React + Babel 装饰器支持）中被广泛使用。
什么是装饰器（Decorator）
装饰器本质上是一个函数，用来“包装”或“增强”类、方法、属性或参数。它通过在定义时使用 @decoratorName 语法来应用，属于元编程的一种方式。
目前装饰器是 JavaScript 的提案功能，在 TypeScript 或使用 Babel 等工具的项目中可以启用。标准尚未完全定稿，但已被广泛应用。
装饰器的基本语法与类型
装饰器可以应用于以下几个位置：
立即学习“Java免费学习笔记（深入）”；
- 类装饰器：作用于整个类
- 方法装饰器：作用于类的方法
- 属性装饰器：作用于类的属性
- 参数装饰器：作用于方法的参数
在 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 还未正式支持，但在工程化项目中已经非常实用。关键是理解其执行时机和目标对象的处理方式，避免副作用。
