JavaScript 中 Class 语法怎么在装饰器 Decorator 中动态修改类的方法-js教程-PHP中文网

JavaScript类方法装饰器需通过TypeScript或Babel启用，接收target、propertyKey、descriptor三参数，可动态包装方法实现日志、计时、权限校验等；其在类定义时执行，不可访问this实例属性，但可在包装函数中访问。

javascript 中 class 语法怎么在装饰器 decorator 中动态修改类的方法

JavaScript 的 Class 语法本身不原生支持装饰器（Decorator），但可通过 TypeScript 或 Babel（配合 @babel/plugin-proposal-decorators）启用实验性装饰器功能。在该前提下，**类方法装饰器**可在定义时动态拦截、包装或替换方法逻辑，实现运行前/后增强、权限校验、日志记录等。

方法装饰器的基本结构与参数

方法装饰器是一个函数，接收三个参数：

target：如果是静态方法，为类构造函数；否则为类的原型对象（prototype）
propertyKey：方法名（字符串或 Symbol）
descriptor：属性描述符对象，含 value（原方法）、enumerable、configurable、writable 等

通过修改 descriptor.value，就能替换原始方法；也可返回新 descriptor 来覆盖默认行为。

动态包装方法：添加日志与计时

以下装饰器在调用目标方法前后自动打印日志并统计耗时：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

function logAndTime(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.time(`[log] ${String(propertyKey)}`);
    const result = originalMethod.apply(this, args);
    console.timeEnd(`[log] ${String(propertyKey)}`);
    return result;
  };

  return descriptor;
}

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

const calc = new Calculator();
calc.add(2, 3); // 控制台输出带计时的日志

运行时条件性修改：基于环境或参数拦截

装饰器可结合闭包或外部状态，在实例化后仍能动态响应变化。例如，只在开发环境生效的调试装饰器：

function debugOnly(enabled = true) {
  return function(target, propertyKey, descriptor) {
    if (!enabled || process.env.NODE_ENV !== 'development') {
      return descriptor; // 不做任何修改
    }

    const original = descriptor.value;
    descriptor.value = function(...args) {
      console.log(`? Debug: calling ${String(propertyKey)} with`, args);
      return original.apply(this, args);
    };
    return descriptor;
  };
}

class ApiClient {
  @debugOnly(true)
  fetchUser(id) {
    return Promise.resolve({ id, name: 'Alice' });
  }
}