JavaScript装饰器是处于TC39 Stage 3的语法特性,本质为接收目标、名称、描述符等参数的函数式元编程工具,用于在运行时包裹行为以实现日志、权限等横切关注点;支持类、方法、访问器、属性及参数五种类型,各具不同参数与用途。

JavaScript装饰器是一种用于修改类、方法、访问器、属性或参数行为的语法特性,目前处于TC39提案的第三阶段(Stage 3),尚未正式纳入ECMAScript标准,但已被TypeScript和Babel等工具广泛支持。
装饰器的本质:函数式元编程
装饰器本质上是接收目标对象、成员名、描述符等参数的函数。它不改变原始代码逻辑,而是在运行时“包裹”或“劫持”原有行为,实现横切关注点(如日志、权限、缓存)的复用。
例如,一个简单的@log装饰器可自动打印方法调用信息:
function log(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`调用 ${name},参数:`, args);
return original.apply(this, args);
};
return descriptor;
}
类装饰器:增强整个类的行为
类装饰器作用于类构造函数,可用于注册、注入依赖、添加静态属性或重写原型。
立即学习“Java免费学习笔记(深入)”;
- 接受单个参数:target(类的构造函数)
- 可返回新构造函数来替换原类(需谨慎,可能破坏 instanceof)
- 常用于框架集成,如Angular的@Component、MobX的@observer
示例:为类自动添加版本号
function version(v) {
return function(target) {
target.version = v;
};
}
@version("1.2.0")
class ApiClient {}
console.log(ApiClient.version); // "1.2.0"
方法与访问器装饰器:控制执行逻辑
这类装饰器最常用,接收三个参数:target(原型或构造函数)、name(方法名)、descriptor(属性描述符),可通过修改descriptor.value或descriptor.get/set来增强行为。
- 可实现防抖、节流、只读校验、异步状态包装(如@loading)
- 能访问this上下文,适合处理实例状态
- 多个装饰器按从下到上顺序执行(类似洋葱模型)
属性与参数装饰器:补充元数据与校验
属性装饰器(@prop)通常用于收集字段信息(如序列化规则),不直接修改行为;参数装饰器(@inject)则常配合依赖注入使用,接收target、name、index(参数索引)。
- 属性装饰器无法直接拦截赋值,需配合Object.defineProperty或Proxy在类初始化时介入
- 参数装饰器本身不运行时生效,主要配合反射API(如Reflect.metadata)存储类型或注入标识
- TypeScript中常用于生成装饰器元数据,供运行时框架读取










