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

JavaScript 装饰器与元数据编程是现代前端开发中越来越重要的技术,尤其在 TypeScript 和框架如 Angular、NestJS 中广泛应用。它们允许你在类、方法、属性等代码结构上附加额外行为或信息,实现关注点分离和代码复用。下面通过实战角度带你掌握装饰器与元数据的结合使用。
装饰器本质上是一个函数,它会在目标被定义时执行,并接收目标的元信息作为参数。TypeScript 支持以下四种装饰器:
启用装饰器需在 tsconfig.json 中开启相关配置:
{
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}原生 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);
}利用装饰器和元数据,可以实现一个轻量级依赖注入系统。
定义 @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中文网其它相关文章!
编程怎么学习?编程怎么入门?编程在哪学?编程怎么学才快?不用担心,这里为大家提供了编程速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号