17370845950

JavaScript装饰器是Stage 3实验特性，通过@符号声明式修改类/方法/属性行为，本质为接收target、key、descriptor等参数的高阶函数，需Babel或TS转译支持。

JavaScript 中的装饰器（Decorator）是一种实验性语法特性，目前处于 Stage 3 提案阶段，尚未被正式纳入 ECMAScript 标准，但已被 TypeScript 和主流构建工具（如 Babel）广泛支持。它提供了一种简洁、声明式的方式来**修改类、类方法、访问器或属性的行为**，而无需侵入原始定义。

装饰器的本质是高阶函数

装饰器本身是一个函数，接收目标对象、成员名、属性描述符等参数，并可返回新的描述符或修改原对象。它通过 @ 符号写在被修饰项上方，语法糖背后是运行时的函数调用。

• 类装饰器：接收 constructor 作为唯一参数
• 方法/访问器装饰器：接收 target（原型或构造函数）、propertyKey（方法名）、descriptor（属性描述符）
• 属性装饰器（非标准，Babel/TS 支持）：仅接收 target 和 propertyKey，不能直接拦截赋值（需配合 getter/setter 或初始化逻辑）

启用装饰器需要配置构建工具

原生 JavaScript 引擎不支持装饰器语法，必须借助转译。例如：

• Babel：安装 @babel/plugin-proposal-decorators，并在 .babelrc 中启用，推荐设置 {"legacy": true} 以兼容常见库
• TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true（后者用于反射元数据）

常用装饰器模式与写法

以下为几个典型实用场景的实现方式（以方法装饰器为例）：

• 日志记录：在方法执行前后打印信息
  

  function log(target, key, descriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args) {
      console.log(`[LOG] ${key} called with`, args);
      const result = original.apply(this, args);
      console.log(`[LOG] ${key} returned`, result);
      return result;
    };
    return descriptor;
  }
  class Calculator {
  @log
  add(a, b) { return a + b; }
  }

• 防抖/节流：控制高频方法的执行频率
  

  function debounce(wait) {
    return function(target, key, descriptor) {
      const original = descriptor.value;
      let timeout;
      descriptor.value = function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => original.apply(this, args), wait);
      };
    };
  }

• 权限检查：运行前校验用户角色
  

  function requireRole(role) {
    return function(target, key, descriptor) {
      const original = descriptor.value;
      descriptor.value = function(...args) {
        if (!this.user || this.user.role !== role) {
          throw new Error(`Access denied: ${role} required`);
        }
        return original.apply(this, args);
      };
    };
  }

类装饰器的实际用途

类装饰器适合做整体增强，比如注册、注入、冻结实例等：

• 自动注册到全局管理器：
  

  function register(name) {
    return function(constructor) {
      Registry.register(name, constructor);
    };
  }
  @register('UserService')
  class UserService { / ... / }

• 冻结类的 prototype（防止意外修改）：
  

  function sealed(constructor) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
  }

装饰器不是黑魔法，它依赖于 JavaScript 的元编程能力（如 Object.defineProperty），理解其参数和返回值机制是正确使用的关键。实际项目中建议优先选用成熟库（如 core-decorators）或封装内部统一装饰器规范，避免过度抽象导致可读性下降。