JavaScript 装饰器尚未标准化,@decorator 语法处于 TC39 Stage 3,需 Babel/TypeScript 编译或 polyfill;仅支持类及成员,不支持函数;类装饰器修改构造函数,方法装饰器通过 descriptor 包装逻辑;TS 与 Babel 装饰器协议不兼容,reflect-metadata 仅为元数据基础设施。

装饰器在 JavaScript 中还没正式成为标准语法
目前 @decorator 语法仍处于 TC39 Stage 3 提案阶段,未被所有环境原生支持(比如 Node.js 默认不启用,Chrome/Firefox 也不默认解析)。直接写 @log 会报 SyntaxError: Unexpected token '@'。想用,必须配 Babel 或 TypeScript 编译;纯浏览器环境需依赖 core-js 或 reflect-metadata 等 polyfill,且仅对类和类成员生效,不能用于函数或普通对象。
类装饰器:修改类本身的行为
类装饰器是一个接收 constructor 的函数,返回新构造函数或原样返回,常用于注入逻辑、打日志、注册元信息:
function readonly(target) {
Object.defineProperty(target.prototype, 'isReadOnly', {
value: true,
writable: false,
configurable: false
});
return target;
}
@readonly
class Config {}
console.log(new Config().isReadOnly); // true
- 装饰器函数必须显式
return,否则类会被替换成undefined - 不能在装饰器里直接改
target.prototype的可枚举性——除非你清楚for...in和Object.keys()的行为差异 - Babel 默认使用
legacy装饰器模式(类似 TypeScriptexperimentalDecorators),与提案标准不兼容;若用新提案,需开启decorators-legacy: false并配合@babel/plugin-proposal-decorators
方法装饰器:拦截或包装实例方法
方法装饰器接收三个参数:target(原型对象)、propertyKey(方法名)、descriptor(属性描述符),适合加日志、防抖、权限校验:
function log(target, propertyKey, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`[${propertyKey}] called with`, args);
return original.apply(this, args);
};
}
class ApiClient {
@log
fetch(url) {
return Promise.resolve(`data from ${url}`);
}
}
-
descriptor.value是原始方法,必须用apply或call绑定this,否则丢失上下文 - 若方法是
async,装饰后返回的仍是Promise,但错误不会自动被捕获——需要手动try/catch包裹original - 多个装饰器从上到下执行,但包装顺序是从下到上(类似洋葱模型),
@A @B method()中B先包装,A再包一层
TypeScript 用户要注意的兼容陷阱
TypeScript 的 experimentalDecorators 默认走的是旧版装饰器协议(不支持 initialize 钩子、不支持装饰器工厂返回函数),且与 Babel 新提案互不兼容。一旦你在 tsconfig.json 开了这个选项,又用 Babel 编译,大概率出现 Cannot read property 'kind' of undefined 这类报错。
立即学习“Java免费学习笔记(深入)”;
- 统一工具链:要么全用 TS +
experimentalDecorators+emitDecoratorMetadata,要么全用 Babel +@babel/plugin-proposal-decorators(并禁用 TS 的装饰器) -
reflect-metadata只提供Reflect.defineMetadata等 API,它本身不实现装饰器逻辑,只是配套基础设施;漏引会导致Reflect.getMetadata is not a function - 装饰器无法访问类的泛型参数,
class Box中{ @log get value(): T { ... } } T在运行时已擦除,装饰器拿不到











