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 库来实现类型和自定义元数据的存储与读取。
要使用元数据，需：
立即学习“Java免费学习笔记（深入）”；
Veed AI Voice Generator
Veed推出的AI语音生成器
77 查看详情 
安装 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(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_装饰器元数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/863231.html
微信扫一扫 
支付宝扫一扫 
