现代JavaScript_装饰器元数据-js教程-PHP中文网

现代JavaScript_装饰器元数据

狼影

发布： 2025-11-27 19:53:02

原创

630人浏览过

JavaScript装饰器（Stage 3）通过@语法增强类成员功能，结合reflect-metadata可实现元数据存储与依赖注入。示例包括log装饰器记录方法调用，Required标记必填属性，Injectable与Inject实现DI容器解析，需配置tsconfig启用experimentalDecorators和emitDecoratorMetadata。

现代javascript_装饰器元数据

JavaScript 装饰器（Decorators）是一种用于增强类及其成员功能的语法特性，虽然目前仍处于提案阶段（截至2024年为 Stage 3），但已在 TypeScript 和部分构建工具中广泛使用。装饰器结合元数据（Metadata）系统，可以实现依赖注入、运行时类型反射、AOP（面向切面编程）等高级功能。

装饰器基础语法

装饰器是一个函数，通过 @ 符号应用于类、方法、访问器、属性或参数。它在定义时被调用，接收目标对象、成员名和属性描述符（或类构造函数）作为参数。

示例：方法装饰器

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Calling "${name}" with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

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

登录后复制

元数据反射（Reflect Metadata）

原生 JavaScript 不提供运行时读取装饰器元数据的能力。TypeScript 社区通常借助 reflect-metadata 库来实现类型和自定义元数据的存储与读取。

要使用元数据，需：

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

Veed AI Voice Generator

Veed推出的AI语音生成器

查看详情

安装 reflect-metadata：npm install reflect-metadata
在入口文件导入：import 'reflect-metadata'
TypeScript 配置启用装饰器和元数据：

tsconfig.json 相关配置

{
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}

登录后复制

启用 emitDecoratorMetadata 后，TypeScript 会自动为参数、方法等注入类型信息（如 Object.prototype.constructor）到元数据中。

自定义元数据操作

使用 Reflect.defineMetadata 和 Reflect.getMetadata 可以在装饰器中存储和读取任意数据。

示例：属性装饰器添加元数据

function Required(target: any, propertyKey: string | symbol) {
  Reflect.defineMetadata('required', true, target, propertyKey);
}

class User {
  @Required
  name: string;

  age?: number;
}

// 检查哪些字段是必需的
function validate(instance: any) {
  const proto = Object.getPrototypeOf(instance);
  const keys = Object.getOwnPropertyNames(instance);
  for (const key of keys) {
    if (Reflect.getMetadata('required', proto, key)) {
      if (!instance[key]) {
        console.error(`${key} is required but missing.`);
      }
    }
  }
}

登录后复制

装饰器与依赖注入场景

元数据系统常见于依赖注入容器。例如，框架可通过装饰器标记服务，并在运行时根据元数据自动解析依赖。

简单示例：Inject 装饰器

function Injectable() {
  return (target: Function) => {
    Reflect.defineMetadata('injectable', true, target);
  };
}

function Inject(token) {
  return (target: any, propertyKey: string | undefined, parameterIndex: number) => {
    const existingTokens = 
      Reflect.getMetadata('di:tokens', target, 'constructor') || [];
    existingTokens[parameterIndex] = token;
    Reflect.defineMetadata('di:tokens', existingTokens, target, 'constructor');
  };
}

@Inspectable()
class ApiService { }

@Injectable()
class UserController {
  constructor(@Inject(ApiService) private api: ApiService) {}
}

// 容器解析
function resolve<T>(target: Function): T {
  const tokens = Reflect.getMetadata('di:tokens', target, 'constructor');
  const dependencies = tokens.map(token => resolveInstance(token));
  return new target(...dependencies);
}

登录后复制

基本上就这些。现代 JavaScript 装饰器配合元数据机制，虽非标准最终功能，但在 TypeScript 生态中已足够稳定用于构建可维护的大型应用。注意兼容性处理和构建配置即可有效落地。

以上就是现代JavaScript_装饰器元数据的详细内容，更多请关注php中文网其它相关文章！