当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript装饰器是什么？如何使用？

JavaScript装饰器是什么？如何使用？

2026-04-13 20:13:39 0浏览收藏

JavaScript 装饰器是一种尚处 Stage 3 提案阶段的声明式语法糖，需借助 Babel 或 TypeScript 转译才能运行，它本质是作用于类、方法、访问器等的高阶函数，在类定义时（而非运行时）执行，通过接收固定参数（如 target、propertyKey、descriptor 或 constructor）并返回修改后的描述符或构造函数来实现功能增强——无论是为方法自动添加日志、权限校验、防抖缓存，还是为类注入路由元数据、注册依赖、冻结原型，都高度依赖对执行时机、this 绑定、转译配置及私有成员限制的精准把握，稍有不慎就会触发语法错误、元数据丢失或上下文失效；读懂它，就是读懂现代前端框架底层能力的钥匙。

什么是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