当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript装饰器是什么？如何增强类和方法？

JavaScript装饰器是什么？如何增强类和方法？

2026-05-07 09:06:35 0浏览收藏

JavaScript装饰器是一种尚处Stage 3提案阶段的语法糖，本质是在类定义时执行的高阶函数，用于以声明式方式增强类、方法、属性等行为，但必须依赖Babel或TypeScript转译才能运行——原生环境直接报错；它不改变JS执行模型，却常因误解其“编译期执行”特性（而非运行时）、this绑定失效、异步限制及私有字段不支持等问题导致踩坑；掌握其固定参数签名（如方法装饰器的target/propertyKey/descriptor）和典型场景（日志、权限、缓存、路由注册等），才能真正释放其提升代码可维护性与复用性的潜力。

什么是JavaScript Decorator_它如何增强类与方法？

JavaScript Decorator 不是标准语法，目前仍处于 Stage 3 提案阶段，所有使用都依赖 Babel、TypeScript 等转译工具；直接在浏览器或 Node.js 原生环境中运行会报 SyntaxError: Unexpected token '@'。

Decorator 是什么：语法糖，不是运行时特性

Decorator 本质是函数，用于修饰类、类属性（字段）、方法、访问器（get/set）或参数。它本身不改变 JavaScript 的执行模型，只是提供一种更简洁的声明式写法，底层靠转译器展开为普通函数调用。

常见错误现象：

写了 @log 却没配 Babel 插件（如 @babel/plugin-proposal-decorators），直接报错
在 TypeScript 中启用了 experimentalDecorators: true，但忘了开 emitDecoratorMetadata: true（影响反射元数据）
误以为 Decorator 能修改私有字段（#field），实际目前提案不支持装饰私有成员

如何装饰类方法：接收三个参数

方法 Decorator 函数签名固定为：(target, propertyKey, descriptor)。其中 descriptor 是 Object.getOwnPropertyDescriptor(target, propertyKey) 返回的对象，可修改其 value、enumerable、writable 等属性。

典型使用场景：日志、权限校验、防抖、缓存包装。

function log(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${String(propertyKey)} with`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

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

注意点：

descriptor.value 是原始方法，必须用 apply 或 call 绑定 this，否则丢失上下文
若方法是异步的（async），originalMethod 返回的是 Promise，装饰器需显式 await 或返回新 Promise
Babel 默认使用 legacy: true 模式，此时 descriptor 可能为 undefined（对字段装饰），应改用 legacy: false + decoratorsBeforeExport: true

装饰类本身：用于注册、配置或元数据注入

类 Decorator 接收一个参数：constructor（即类本身），必须返回一个构造函数（可为原类，也可替换为子类或代理）。

常见用途：

自动向 DI 容器注册（如 NestJS 的 @Injectable()）
添加静态属性（如 constructor.route = '/users'）
冻结实例（Object.freeze(constructor.prototype)）

function apiRoute(path) {
  return function(target) {
    target.route = path;
    // 可选：为原型方法统一加请求拦截
    const proto = target.prototype;
    for (const key of Object.getOwnPropertyNames(proto)) {
      if (key !== 'constructor' && typeof proto[key] === 'function') {
        const original = proto[key];
        proto[key] = function(...args) {
          console.log(`[API] ${path}${key}:`, args);
          return original.apply(this, args);
        };
      }
    }
  };
}

@apiRoute('/api/v1')
class UserService {
  fetch() { return 'data'; }
}

关键限制：

不能在类 Decorator 中访问实例字段（this.field），因为此时实例尚未创建
若返回新构造函数，需确保继承原 prototype，否则方法丢失
TypeScript 中若未启用 emitDecoratorMetadata，Reflect.getMetadata 将始终返回 undefined