首页 > web前端 > js教程 > 正文

JavaScript装饰器_元数据编程实战

狼影
发布: 2025-11-29 20:12:34
原创
648人浏览过
装饰器与元数据编程通过在类、方法等结构上附加行为实现代码复用,结合reflect-metadata库可在运行时读写元数据,常用于依赖注入等场景。

javascript装饰器_元数据编程实战

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

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

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

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

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

{
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}
登录后复制

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

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

立即学习Java免费学习笔记(深入)”;

安装依赖:

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);
}
登录后复制

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

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

超能文献
超能文献

超能文献是一款革命性的AI驱动医学文献搜索引擎。

超能文献 105
查看详情 超能文献

定义 @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<T>(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装饰器_元数据编程实战的详细内容,更多请关注php中文网其它相关文章!

编程速学教程(入门课程)
编程速学教程(入门课程)

编程怎么学习?编程怎么入门?编程在哪学?编程怎么学才快?不用担心,这里为大家提供了编程速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号