装饰器是JavaScript中用于增强函数、类及成员行为的语法糖，本质为接收目标对象等参数并返回新描述符的高阶函数；需通过TypeScript或Babel等工具链启用，支持日志、防抖、权限校验等场景，多个装饰器按从下到上、从右到左顺序执行。

装饰器（Decorator）是 JavaScript 中一种用于修改或增强函数、类及其成员（如方法、属性）行为的语法特性，目前处于 TC39 第四阶段提案（已进入 ECMAScript 标准草案），在 TypeScript 和支持实验性语法的现代 JavaScript 环境（如 Babel、ESBuild、Vite）中可直接使用。

装饰器本质：高阶函数的语法糖

装饰器本质上是一个接收目标对象、属性名、描述符等参数，并返回新描述符（或修改原描述符）的函数。它不是运行时魔法，而是编译期（或转译期）介入对象定义过程的机制。

• 函数装饰器作用于函数声明或导出表达式，常用于包装执行逻辑（如日志、防抖、权限校验）
• 类装饰器作用于整个类构造器，可用于注册、元数据注入、子类自动增强等
• 方法/访问器/属性装饰器作用于类内部成员，可劫持调用、拦截赋值、添加元数据

启用装饰器需配置环境

原生 JavaScript 浏览器暂不支持装饰器语法（截至 2025 年底），需借助工具链：

• TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true
• Babel：安装 @babel/plugin-proposal-decorators，插件配置启用 legacy: false（符合标准提案）
• Vite / Next.js / Remix：通常默认支持，检查文档确认装饰器模式（legacy 或 2025-11）

常见实用装饰器写法

以方法装饰器为例，实现一个简单的日志记录装饰器：

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)))。注意：装饰器本身不改变原始方法，而是通过修改描述符间接影响行为，因此顺序直接影响增强逻辑的包裹层次。