JavaScript装饰器是处于TC39 Stage 3的语法糖，用于修饰类、方法、访问器或属性，以@开头，本质是接收目标、名称、描述符等参数的函数，需配置experimentalDecorators支持，执行顺序为从上到下、从外到内。
JavaScript的装饰器（Decorator）是一种用于修改类、类方法、访问器或属性行为的语法糖，目前处于TC39提案的第三阶段（Stage 3），尚未被正式纳入ECMAScript标准，但已被TypeScript和主流构建工具（如Babel）广泛支持。
装饰器的基本形式
装饰器是一个函数，接收目标对象、成员名和描述符等参数，可返回新的描述符或直接修改原行为。它以@符号开头，写在被修饰项上方：
- 类装饰器：作用于整个类，接收类构造函数作为参数
- 方法/访问器装饰器：接收目标对象、属性名、属性描述符
- 属性装饰器（实验性）：仅接收目标对象和属性名（不传描述符，无法直接拦截赋值）
一个实用的例子
比如用装饰器实现自动绑定类方法到实例，避免this丢失：
function autobind(target, key, descriptor) {
const original = descriptor.value;
return {
configurable: true,
enumerable: false,
get() {
const bound = original.bind(this);
Object.defineProperty(this, key, { value: bound });
return bound;
}
};
}
class Button {
@autobind
handleClick() {
console.log(this); // 始终指向实例
}
}
使用前要注意的事
装饰器依赖experimentalDecorators配置。TypeScript需在tsconfig.json中开启；Babel需安装@babel/plugin-proposal-decorators并配置legacy: true或version: "2023-11"（对应提案更新）。注意装饰器执行顺序：从上到下、从外到内，类装饰器最后执行。
立即学习“Java免费学习笔记（深入）”；
和普通高阶函数的区别
装饰器不是运行时魔法，本质仍是函数调用，只是语法更简洁直观。它不改变JavaScript的原型链或执行模型，所有能力都可通过手动包装、Object.defineProperty等方式实现——装饰器只是让这类模式更易读、可复用、利于组合。
基本上就这些。想用好它，关键是理解它修饰的是什么、何时执行、能拿到哪些参数，而不是把它当成黑盒语法糖。
