JavaScript装饰器是一种元编程特性，允许通过@语法在类、方法等上添加修饰逻辑。它本质是接收元信息参数的函数，可返回新定义来增强原行为。目前处于ECMAScript第3阶段，可通过Babel或TypeScript提前使用。需配置"experimentalDecorators": true启用。常见类型有类、方法、属性和参数装饰器。例如Log装饰器可记录方法调用，Debounce装饰器可实现防抖。广泛用于日志、权限校验、性能监控等场景，提升代码复用性与可维护性，尤其在NestJS等框架中应用广泛。但需注意标准未最终定稿，存在兼容性风险。
JavaScript 装饰器是一种元编程特性，允许你在类、方法、属性或参数上添加修饰逻辑，从而在不修改原始代码的情况下增强其行为。虽然目前装饰器仍处于 ECMAScript 提案阶段（截至 2024 年为第 3 阶段），但已可通过 Babel 或 TypeScript 提前使用。
装饰器的基本概念
装饰器本质上是一个函数，它接收目标对象的元信息作为参数，并可返回新的定义来“修饰”原结构。语法使用 @ 符号放在类元素前。
常见装饰器类型包括：
- 类装饰器：作用于整个类
- 方法装饰器：修饰类中的方法
- 属性装饰器：用于字段或访问器
- 参数装饰器：修饰方法参数
实际用法示例
以 TypeScript 为例，启用装饰器需在 tsconfig.json 中设置：
立即学习“Java免费学习笔记（深入）”；
"experimentalDecorators": true,
"emitDecoratorMetadata": true
下面是一个日志装饰器，用于记录方法调用：
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Calling "${propertyKey}" with`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
class Calculator {
@Log
add(a: number, b: number) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3); // 输出: Calling "add" with [2, 3]
应用场景与优势
装饰器适合用于横切关注点，比如权限校验、性能监控、自动注册等。
- 简化重复逻辑，提升代码复用性
- 使业务代码更专注核心逻辑
- 便于构建框架级功能（如 NestJS 大量使用装饰器）
例如，可以创建一个防抖装饰器限制高频调用：
function Debounce(delay: number) {return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
let timeout: NodeJS.Timeout;
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
clearTimeout(timeout);
timeout = setTimeout(() => originalMethod.apply(this, args), delay);
};
};
}
基本上就这些。装饰器提供了一种声明式、简洁的方式来扩展对象行为，是现代 JavaScript/TypeScript 开发中强大的元编程工具。注意当前标准尚未最终定稿，使用时应关注浏览器和运行时兼容性。
