装饰器是用于修改类或类成员定义的函数，属 Stage 3 提案，需 Babel/TS 启用；接收 target、name、descriptor 等参数，在类定义时执行，支持类、方法、访问器及（TS 扩展）属性装饰，常用于日志、权限、自动绑定 this 等横切逻辑，但浏览器原生不支持，依赖构建配置且多装饰器间需注意执行与覆盖顺序。
装饰器是函数，用于修改类或类成员的定义
装饰器本身不是 JavaScript 原生语法（截至 ES2023），而是处于 Stage 3 提案阶段的特性，需通过 Babel 或 TypeScript 启用。它本质是一个接收目标、属性名、描述符等参数的函数，运行时机在类定义时（而非实例化时），作用是“劫持并重写”类结构。
@decorator 语法糖背后是 target、name、descriptor 三元组
当你写 @readonly 修饰一个方法，Babel/TS 实际会把它编译为类似 readonly(Example.prototype, 'method', Object.getOwnPropertyDescriptor(Example.prototype, 'method')) 的调用。关键点在于：
- 类装饰器：第一个参数是构造函数（
target） - 方法/访问器装饰器：参数依次为
target（原型或构造器）、name（字符串）、descriptor（属性描述符对象） - 属性装饰器（非标准，TS 支持但提案未定）：
target和name存在，但descriptor为undefined，只能做元数据标记
常见增强场景：日志、权限、缓存、自动绑定 this
装饰器真正价值在于把横切逻辑从类内部剥离。比如自动绑定 this 可避免箭头函数或 .bind() 冗余：
function autobind(_target: any, _name: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
const adjDescriptor: PropertyDescriptor = {
configurable: true,
enumerable: false,
get() {
const boundFn = originalMethod.bind(this);
Object.defineProperty(this, _name, { value: boundFn });
return boundFn;
}
};
return adjDescriptor;
}
class Component {
@autobind
handleClick() {
console.log(this); // 确保 this 指向实例
}
}
注意：上述代码依赖 TypeScript 类型注解；纯 JS 需自行判断 descriptor.value 是否为函数，且不能直接返回新描述符（需兼容旧版 Babel 行为）。
立即学习“Java免费学习笔记（深入）”；
Babel 配置和浏览器兼容性是最大落地障碍
不配置正确插件，@ 语法会直接报错。必须启用：
-
@babel/plugin-proposal-decorators（配{"version": "2023-01"}） @babel/plugin-proposal-class-properties
而且目前所有浏览器原生都不支持装饰器语法——哪怕你用 core-js 也无法 polyfill 语法层面的 @。这意味着：它只适用于构建流程可控的项目（React/Vue 组件库、TS 服务端代码），不适合直接跑在浏览器里的轻量脚本。
最易被忽略的一点：装饰器执行顺序是从上到下、从外到内，但返回的 descriptor 修改可能被后续装饰器覆盖——多个装饰器作用于同一方法时，务必确认它们是否兼容，而不是假设“先写的先生效”。
