JavaScript装饰器与元数据应用实战

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript装饰器与元数据编程实战》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

装饰器与元数据编程通过在类、方法等结构上附加行为实现代码复用，结合reflect-metadata库可在运行时读写元数据，常用于依赖注入等场景。

JavaScript 装饰器与元数据编程是现代前端开发中越来越重要的技术，尤其在 TypeScript 和框架如 Angular、NestJS 中广泛应用。它们允许你在类、方法、属性等代码结构上附加额外行为或信息，实现关注点分离和代码复用。下面通过实战角度带你掌握装饰器与元数据的结合使用。

装饰器基础：理解四种常见装饰器类型

装饰器本质上是一个函数，它会在目标被定义时执行，并接收目标的元信息作为参数。TypeScript 支持以下四种装饰器：

• 类装饰器：作用于类构造函数，可用于修改类的行为或替换类定义。
• 方法装饰器：作用于类的方法描述符，可用于拦截调用、添加日志或权限控制。
• 属性装饰器：作用于类的属性声明，常用于依赖注入或标记字段用途。
• 参数装饰器：作用于方法参数，配合元数据可提取参数类型或用途。

启用装饰器需在 tsconfig.json 中开启相关配置：

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

使用 reflect-metadata 提供运行时元数据支持

原生 JavaScript 不保留类型信息到运行时，而 reflect-metadata 库填补了这一空白。通过它，你可以在装饰器中存储和读取元数据。

安装依赖：

npm install reflect-metadata --save

在入口文件顶部引入：

import 'reflect-metadata';

示例：为方法添加元数据标签：

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

  // 存储元数据
  Reflect.defineMetadata('custom:logged', true, target, propertyName);
}

实战：构建简单的依赖注入容器

利用装饰器和元数据，可以实现一个轻量级依赖注入系统。

定义 @Injectable 装饰器标记可注入类：

function Injectable() {
  return function (constructor: Function) {
    Reflect.defineMetadata('di:injectable', true, constructor);
  };
}

定义 @Inject 装饰器标记构造函数参数：

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

简单容器实现：

class Container {
  private instances = new Map();

  resolve(token: Function): T {
    if (this.instances.has(token)) {
      return this.instances.get(token);
    }

    const tokens = Reflect.getMetadata('di:tokens', token) || [];
    const dependencies = tokens.map(dep => this.resolve(dep));
    
    const instance = new token(...dependencies);
    this.instances.set(token, instance);
    return instance;
  }
}

使用方式：

@Injectable()
class Logger {
  log(msg: string) { console.log(msg); }
}

@Injectable()
class Service {
  constructor(@Inject(Logger) private logger: Logger) {}

  run() { this.logger.log('Service running'); }
}

注意事项与兼容性

目前装饰器语法仍在提案阶段（Stage 3），不同版本间可能存在差异。TypeScript 默认使用旧版装饰器模型，建议在 tsconfig.json 中明确设置：

"target": "ES2022",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"useDefineForClassFields": false

新版装饰器（2023+）语义更清晰，但生态适配仍在进行中。当前 NestJS 等框架仍基于旧模型运作。

基本上就这些。掌握装饰器与元数据组合，能让你写出更具扩展性和可维护性的代码，特别是在构建框架或复杂应用架构时非常有用。

今天关于《JavaScript装饰器与元数据应用实战》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！