JavaScript装饰器是Stage 3实验性语法，用于在声明时注解和修改类、方法、访问器、属性或参数；需Babel或TypeScript支持，本质是接收目标对象等参数的函数，常用于日志、权限校验等横切逻辑。
JavaScript 装饰器（Decorators）是一种实验性语法（目前处于 Stage 3 提案），用于**在声明时对类、类方法、访问器、属性或参数进行注解和修改**。它本身不改变 JavaScript 运行时行为，但配合工具（如 Babel、TypeScript）可实现自动增强逻辑，比如日志、权限校验、缓存、重试等。
装饰器本质是函数
装饰器就是一个接收目标对象、成员名、属性描述符等参数的函数。它能读取、修改甚至替换被装饰的成员。
- 类装饰器：接收 constructor 函数作为唯一参数
- 方法/访问器装饰器：接收 target（原型或构造器）、name（字符串）、descriptor（属性描述符）
- 属性装饰器：接收 target 和 name，不传 descriptor（因尚未定义）
- 参数装饰器：接收 target、name、index（参数索引），仅用于元数据收集
启用装饰器需工具支持
原生 JavaScript 尚未支持装饰器语法（@xxx）。必须通过构建工具启用：
-
TypeScript：在
tsconfig.json中开启"experimentalDecorators": true和"emitDecoratorMetadata": true -
Babel：使用插件
@babel/plugin-proposal-decorators（推荐配置{"version": "2023-11"}）
注意：装饰器执行顺序是自下而上（先装饰内层，再外层），且只在类定义时运行一次，不是每次调用时执行。
立即学习“Java免费学习笔记（深入）”；
常用场景与写法示例
以下为 TypeScript + 装饰器的典型用法（Babel 环境写法一致）：
① 方法日志装饰器
function log(target: any, name: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`[LOG] 调用 ${name}(${args.join(', ')})`);
const result = original.apply(this, args);
console.log(`[LOG] ${name} 返回:`, result);
return result;
};
}
使用：
class Calculator {
@log
add(a: number, b: number) {
return a + b;
}
}
② 类装饰器添加静态属性
function version(v: string) {
return function<T extends { new(...args: any[]): {} }>(constructor: T) {
constructor.prototype.version = v;
};
}
@version("1.2.0")
class ApiClient {}
console.log(new ApiClient().version); // "1.2.0"
③ 权限检查装饰器（带参数）
function requireRole(role: string) {
return function(target: any, name: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function(...args: any[]) {
if (this.userRole !== role) {
throw new Error(`需要 ${role} 权限`);
}
return original.apply(this, args);
};
};
}
class AdminPanel {
userRole = "admin";
@requireRole("admin")
deleteUser(id: number) {
console.log("已删除用户", id);
}
}
注意事项与限制
- 装饰器不能用于普通函数或变量声明，仅支持类及其成员
- 属性装饰器无法直接拦截赋值（因不提供 descriptor），如需响应式，需配合
Object.defineProperty或元数据反射 - TypeScript 中若启用
emitDecoratorMetadata，可配合reflect-metadata读取类型信息 - 多个装饰器叠加时，从上到下求值，但执行顺序是“由内而外”——即最靠近成员的先运行
基本上就这些。装饰器不是黑魔法，而是让横切关注点（如日志、校验、监控）更清晰、可复用的语法糖。用好它，代码会更简洁，也更容易维护。
