17370845950

JavaScript装饰器是Stage 3实验性语法，用于在声明时注解和修改类、方法、访问器、属性或参数；需Babel或TypeScript支持，本质是接收目标对象等参数的函数，常用于日志、权限校验等横切逻辑。

JavaScript 装饰器（Decorators）是一种实验性语法（目前处于 Stage 3 提案），用于**在声明时对类、类方法、访问器、属性或参数进行注解和修改**。它本身不改变 JavaScript 运行时行为，但配合工具（如 Babel、TypeScript）可实现自动增强逻辑，比如日志、权限校验、缓存、重试等。

装饰器本质是函数

装饰器就是一个接收目标对象、成员名、属性描述符等参数的函数。它能读取、修改甚至替换被装饰的成员。

• 类装饰器：接收 constructor 函数作为唯一参数
• 方法/访问器装饰器：接收 target（原型或构造器）、name（字符串）、descriptor（属性描述符）
• 属性装饰器：接收 target 和 name，不传 descriptor（因尚未定义）
• 参数装饰器：接收 target、name、index（参数索引），仅用于元数据收集

启用装饰器需工具支持

原生 JavaScript 尚未支持装饰器语法（@xxx）。必须通过构建工具启用：

• TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true
• Babel：使用插件 @babel/plugin-proposal-decorators（推荐配置 {"version": "2025-11"}）

注意：装饰器执行顺序是自下而上（先装饰内层，再外层），且只在类定义时运行一次，不是每次调用时执行。

常用场景与写法示例

以下为 TypeScript + 装饰器的典型用法（Babel 环境写法一致）：

① 方法日志装饰器

function log(target: any, name: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`[LOG] 调用 ${name}(${args.join(', ')})`);
    const result = original.apply(this, args);
    console.log(`[LOG] ${name} 返回:`, result);
    return result;
  };
}

使用：

class Calculator {
  @log
  add(a: number, b: number) {
    return a + b;
  }
}

② 类装饰器添加静态属性

function version(v: string) {
  return function(constructor: T) {
    constructor.prototype.version = v;
  };
}

@version("1.2.0")
class ApiClient {}
console.log(new ApiClient().version); // "1.2.0"

③ 权限检查装饰器（带参数）

function requireRole(role: string) {
  return function(target: any, name: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
      if (this.userRole !== role) {
        throw new Error(`需要 ${role} 权限`);
      }
      return original.apply(this, args);
    };
  };
}

class AdminPanel {
  userRole = "admin";
  @requireRole("admin")
  deleteUser(id: number) {
    console.log("已删除用户", id);
  }
}

注意事项与限制

• 装饰器不能用于普通函数或变量声明，仅支持类及其成员
• 属性装饰器无法直接拦截赋值（因不提供 descriptor），如需响应式，需配合 Object.defineProperty 或元数据反射
• TypeScript 中若启用 emitDecoratorMetadata，可配合 reflect-metadata 读取类型信息
• 多个装饰器叠加时，从上到下求值，但执行顺序是“由内而外”——即最靠近成员的先运行

基本上就这些。装饰器不是黑魔法，而是让横切关注点（如日志、校验、监控）更清晰、可复用的语法糖。用好它，代码会更简洁，也更容易维护。