JavaScript 中 Class 语法怎么在装饰器中拦截和修改类的静态属性-js教程-PHP中文网

javascript类装饰器通过target参数获取构造函数，可遍历其静态属性并用object.defineproperty修改，或用proxy动态拦截读写，支持工厂模式按需定制，但受限于执行时机和环境兼容性。

javascript 中 class 语法怎么在装饰器中拦截和修改类的静态属性

JavaScript 的 Class 语法本身不原生支持装饰器（Decorator）——这是目前仍处于 Stage 3 提案阶段的特性（TC39），尚未被所有运行时默认启用。但借助 Babel（配合 @babel/plugin-proposal-decorators）或 TypeScript，你可以在编译时使用类装饰器，并在其中访问、拦截甚至替换类的静态属性。

装饰器如何获取并修改静态属性

类装饰器是一个函数，接收三个参数：target（类的构造函数）、name（类名，仅用于命名装饰器，实际常为 undefined）、descriptor（undefined，因是类装饰器而非方法/属性装饰器）。关键在于：target 就是类本身，也就是构造函数对象，而静态属性就直接挂在它上面。

因此，你可以遍历 Object.getOwnPropertyDescriptors(target)，筛选出你关心的静态属性（比如以 __ 开头、或白名单字段），然后用 Object.defineProperty 覆盖或包装它们。

示例：拦截所有静态字符串属性，自动转为大写：

function uppercaseStaticStrings(target) {
  const descriptors = Object.getOwnPropertyDescriptors(target);
  for (const [key, desc] of Object.entries(descriptors)) {
    if (desc.value && typeof desc.value === 'string' && !desc.get && !desc.set) {
      Object.defineProperty(target, key, {
        value: desc.value.toUpperCase(),
        writable: true,
        enumerable: desc.enumerable,
        configurable: desc.configurable
      });
    }
  }
}

@uppercaseStaticStrings
class User {
  static role = 'admin';
  static version = '1.2.0';
  static isEnabled = true; // 不是 string，不会被改
}
console.log(User.role);     // 'ADMIN'
console.log(User.version);  // '1.2.0' → 保持不变（含数字和点）

用代理（Proxy）动态拦截读写（更灵活）

若需在每次访问/赋值静态属性时都介入（例如日志、权限校验、懒初始化），可将整个类构造函数用 Proxy 包裹，并重写 get 和 set 捕获器。

OpenJDK 24

下载

注意：必须返回新构造函数（不能直接改 target），且要确保原型链、new 行为等不受影响。

示例：记录所有对静态属性的读取：

function logStaticAccess(target) {
  return new Proxy(target, {
    get(obj, prop, receiver) {
      console.log(`[STATIC GET] ${target.name}.${String(prop)}`);
      return Reflect.get(obj, prop, receiver);
    },
    set(obj, prop, value, receiver) {
      console.log(`[STATIC SET] ${target.name}.${String(prop)} =`, value);
      return Reflect.set(obj, prop, value, receiver);
    }
  });
}

@logStaticAccess
class Config {
  static API_URL = 'https://api.example.com';
  static TIMEOUT = 5000;
}

Config.API_URL; // 输出日志 + 返回值
Config.TIMEOUT = 8000; // 输出日志