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

JavaScript装饰器是什么？如何使用它增强类或方法？

2026-02-27 22:58:40 0浏览收藏

JavaScript装饰器是一种处于Stage 3阶段的实验性语法，它以简洁的@符号形式，在类、方法、属性或参数声明时对其进行注解与增强，本质是接收目标对象、名称和描述符等参数的高阶函数；虽需Babel或TypeScript等工具支持才能落地，却能优雅地实现日志记录、权限校验、缓存、版本标记等横切逻辑，大幅提升代码的可读性、复用性与可维护性——如果你希望告别重复的样板逻辑、让核心业务更聚焦，装饰器正是现代JavaScript工程化中不可或缺的“语法糖利器”。

javascript装饰器是什么_如何使用它增强类或方法？

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": "2023-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);
  }
}