JavaScript装饰器与元数据全解析

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript装饰器与元数据详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

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

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 库来实现类型和自定义元数据的存储与读取。

要使用元数据，需：

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

{
  "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.`);
      }
    }
  }
}

装饰器与依赖注入场景

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

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);
}
</t>

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~