JavaScript装饰器是Stage 3实验性语法，用于声明时修改类/方法/属性行为，需经Babel或TypeScript转译才能运行；本质是接收target、propertyKey、descriptor等参数的函数，通过修改descriptor实现元编程。
JavaScript 装饰器 是一种实验性语法（目前处于 Stage 3 提案），用于在声明时**修改类、方法、访问器、属性或参数的行为**。它本身不改变 JavaScript 的运行时语义，而是通过编译工具（如 Babel、TypeScript）转译为可执行代码，实现“元编程”式的逻辑注入。
你不能直接在浏览器中开箱即用 @decorator 语法——除非你明确配置了转译流程。这是最容易被忽略的前提。
装饰器本质是函数，不是语法糖
一个装饰器就是一个接受目标对象、成员名、属性描述符（或类构造器）作为参数的函数：
function readonly(target, propertyKey, descriptor) {
descriptor.writable = false;
return descriptor;
}
class User {
@readonly
name = 'Alice';
}
上面的 @readonly 实际会被转译为类似 Object.defineProperty(...) 的调用。关键点：
-
target是类的原型（对实例方法）或构造函数（对静态方法/类本身） -
descriptor可以被修改后返回，从而影响属性行为（如writable、enumerable、value、get/set） - 装饰器函数必须有返回值：对方法/属性装饰器，通常要返回修改后的
descriptor；对类装饰器，可返回新构造函数（但会丢失instanceof关系）
TypeScript 和 Babel 对装饰器的支持差异
TypeScript 默认启用的是旧版（ES2015-style）装饰器，与当前提案不兼容；Babel 7.22+ 默认使用新版（legacy: false）。两者行为不同，容易导致：
- 方法装饰器中
descriptor.value在旧版里是原始函数，在新版里可能为undefined（需用initializer） - TypeScript 的
experimentalDecorators编译选项开启后，仅做类型检查，不生成运行时逻辑 —— 真正生效还得靠 Babel 或 tsc 的emitDecoratorMetadata+ 运行时库（如reflect-metadata） - 如果你用 Vite，默认不支持装饰器；需手动添加
@babel/plugin-proposal-decorators并设legacy: false
常见用途：日志、防抖、权限校验、自动绑定 this
装饰器适合封装横切逻辑，避免在每个方法里重复写样板代码。例如自动绑定 this：
立即学习“Java免费学习笔记（深入）”；
function autobind(target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
const adjDescriptor = {
configurable: true,
enumerable: false,
get() {
const boundFn = originalMethod.bind(this);
Object.defineProperty(this, propertyKey, {
value: boundFn,
configurable: true,
writable: true,
});
return boundFn;
},
};
return adjDescriptor;
}
class Form {
@autobind
handleSubmit() {
console.log(this); // 始终指向实例
}
}
注意：这个写法依赖 get 懒绑定，不是所有场景都适用；若需立即绑定，得在构造函数中处理，装饰器无法介入构造过程。
装饰器不能解决所有问题，尤其涉及初始化顺序时
比如你想在类实例化后自动注册到某管理器，或依赖某个 ref 已就绪 —— 装饰器在定义阶段就执行，此时实例根本不存在。这类逻辑更适合放在 constructor、connectedCallback（Web Components）或 React 的 useEffect 中。
另一个典型陷阱：@Memoize 类装饰器若试图重写 constructor，会导致继承链断裂、super() 失效、instanceof 判断失败 —— 此时应优先考虑组合式工具函数，而非强行用装饰器“魔改”类结构。
