JavaScript装饰器_元编程修饰符使用-js教程-PHP中文网

JavaScript装饰器_元编程修饰符使用

紅蓮之龍

发布： 2025-11-23 23:39:06

原创

932人浏览过

JavaScript装饰器是一种元编程特性，允许通过@语法在类、方法等上添加修饰逻辑。它本质是接收元信息参数的函数，可返回新定义来增强原行为。目前处于ECMAScript第3阶段，可通过Babel或TypeScript提前使用。需配置"experimentalDecorators": true启用。常见类型有类、方法、属性和参数装饰器。例如Log装饰器可记录方法调用，Debounce装饰器可实现防抖。广泛用于日志、权限校验、性能监控等场景，提升代码复用性与可维护性，尤其在NestJS等框架中应用广泛。但需注意标准未最终定稿，存在兼容性风险。

javascript装饰器_元编程修饰符使用

JavaScript 装饰器是一种元编程特性，允许你在类、方法、属性或参数上添加修饰逻辑，从而在不修改原始代码的情况下增强其行为。虽然目前装饰器仍处于 ECMAScript 提案阶段（截至 2024 年为第 3 阶段），但已可通过 Babel 或 TypeScript 提前使用。

装饰器的基本概念

装饰器本质上是一个函数，它接收目标对象的元信息作为参数，并可返回新的定义来“修饰”原结构。语法使用 @ 符号放在类元素前。

常见装饰器类型包括：

类装饰器：作用于整个类
方法装饰器：修饰类中的方法
属性装饰器：用于字段或访问器
参数装饰器：修饰方法参数

实际用法示例

以 TypeScript 为例，启用装饰器需在 tsconfig.json 中设置：

立即学习“Java免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

407

查看详情

"experimentalDecorators": true,
"emitDecoratorMetadata": true

下面是一个日志装饰器，用于记录方法调用：

function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling "${propertyKey}" with`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

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

const calc = new Calculator();
calc.add(2, 3); // 输出: Calling "add" with [2, 3]