装饰器是JavaScript中用于增强函数、类及成员行为的语法糖，本质为接收目标对象等参数并返回新描述符的高阶函数；需通过TypeScript或Babel等工具链启用，支持日志、防抖、权限校验等场景，多个装饰器按从下到上、从右到左顺序执行。
装饰器（Decorator）是 JavaScript 中一种用于修改或增强函数、类及其成员（如方法、属性）行为的语法特性，目前处于 TC39 第四阶段提案（已进入 ECMAScript 标准草案），在 TypeScript 和支持实验性语法的现代 JavaScript 环境（如 Babel、ESBuild、Vite）中可直接使用。
装饰器本质：高阶函数的语法糖
装饰器本质上是一个接收目标对象、属性名、描述符等参数，并返回新描述符（或修改原描述符）的函数。它不是运行时魔法，而是编译期（或转译期）介入对象定义过程的机制。
- 函数装饰器作用于函数声明或导出表达式，常用于包装执行逻辑（如日志、防抖、权限校验）
- 类装饰器作用于整个类构造器，可用于注册、元数据注入、子类自动增强等
- 方法/访问器/属性装饰器作用于类内部成员，可劫持调用、拦截赋值、添加元数据
启用装饰器需配置环境
原生 JavaScript 浏览器暂不支持装饰器语法（截至 2024 年底），需借助工具链：
- TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true
- Babel：安装 @babel/plugin-proposal-decorators，插件配置启用 legacy: false（符合标准提案）
- Vite / Next.js / Remix：通常默认支持，检查文档确认装饰器模式（
legacy或2023-11）
常见实用装饰器写法
以方法装饰器为例，实现一个简单的日志记录装饰器：
立即学习“Java免费学习笔记（深入）”；
function log(target, propertyKey, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log(`[LOG] 调用 ${String(propertyKey)}，参数：`, args);
const result = originalMethod.apply(this, args);
console.log(`[LOG] ${String(propertyKey)} 返回：`, result);
return result;
};
}使用方式：
class Calculator {
@log
add(a, b) {
return a + b;
}
}
const calc = new Calculator();
calc.add(2, 3); // 控制台输出调用与返回信息
其他高频场景：
- @debounce(300)：防抖方法调用
-
@readonly：冻结方法不可重写（设置
descriptor.writable = false） - @auth('admin')：运行前校验用户角色
- @memoize：自动缓存函数结果（基于参数序列化）
装饰器组合与顺序
多个装饰器可叠加使用，执行顺序为**从下到上、从右到左**（类似函数组合）：
class User {
@log
@debounce(200)
@throttle(1000)
save() { /* ... */ }
}等价于：log(debounce(throttle(save)))。注意：装饰器本身不改变原始方法，而是通过修改描述符间接影响行为，因此顺序直接影响增强逻辑的包裹层次。
