JavaScript_装饰器与元编程高级技巧-js教程-PHP中文网

JavaScript_装饰器与元编程高级技巧

狼影

发布： 2025-11-19 18:31:02

原创

941人浏览过

装饰器和元编程通过@语法在类、方法等上添加行为或元数据，支持AOP、依赖注入等高级特性。1. 装饰器需TypeScript开启experimentalDecorators，常见有类、方法、属性、参数装饰器。2. 方法装饰器可实现日志、性能监控，如log装饰器记录执行时间。3. 结合reflect-metadata可在运行时读取类型元数据，用于依赖注入。4. 参数装饰器标记参数来源，如Body从请求中提取数据，解耦逻辑。5. 广泛应用于Angular、NestJS等框架，提升代码抽象与可维护性。

javascript_装饰器与元编程高级技巧

装饰器和元编程是 JavaScript 中较为高级但极具实用价值的技巧，尤其在现代框架（如 Angular、NestJS）中广泛应用。它们允许开发者在不修改类或方法逻辑的前提下，增强其行为或提取元信息。下面将从基础到进阶，讲解装饰器的使用方式与元编程的核心思想。

装饰器的基本概念与语法

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。它使用 @expression 的形式，其中 expression 是一个函数，在运行时会被调用，传入被装饰的目标。

要启用装饰器，需在 TypeScript 配置中开启：

"experimentalDecorators": true

JavaScript 目前尚未原生支持装饰器，但在 TypeScript 或 Babel 环境下可使用。

立即学习“Java免费学习笔记（深入）”；

常见装饰器类型包括：

类装饰器：用于修改或替换类定义
方法装饰器：拦截方法调用，实现日志、缓存、权限控制等
属性装饰器：标记属性用途，常用于依赖注入
参数装饰器：为参数添加元数据

示例：一个简单的类装饰器

function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype); }

@sealed class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } }

利用装饰器实现 AOP 编程

通过方法装饰器，可以在不侵入业务逻辑的情况下实现横切关注点，比如日志记录、性能监控、错误捕获等。

示例：记录方法执行时间

function log(target: any, propertyName: string, descriptor: PropertyDescriptor) { const method = descriptor.value;

descriptor.value = function (...args: any[]) { console.log(Calling "${propertyName}" with, args); const start = Date.now(); const result = method.apply(this, args); console.log(Execution time: ${Date.now() - start}ms); return result; }; }

class Calculator { @log add(a: number, b: number) { return a + b; } }

这样，每次调用 add 方法都会自动输出日志和耗时，无需修改方法内部代码。

Linux+PHP+MySQL案例教程

本书以培养高级网站建设与管理人才为目标，内容循序渐进，由浅入深，通过大量的实例系统全面地介绍了Linux+PHP+MySQL环境下的网络后台开发技术。本书详尽分析了近30个典型案例。包括计数器、网站流量统计、留言板、论坛系统、聊天室、投票与调查、用户管理、新闻发布系统、广告轮播、购物系统等等，力求让读者通过对案例的学习，轻松掌握PHP和MySQL的编程精要，迅速掌握网络后台开发技巧。　　本书适

466

查看详情

元编程与 Reflect Metadata

元编程指的是编写能够操作程序结构本身的代码。结合装饰器与 reflect-metadata 包，可以为类或属性附加额外信息，并在运行时读取。

安装 reflect-metadata：

npm install reflect-metadata

示例：为属性添加类型元数据

import 'reflect-metadata';

const TYPE_KEY = 'design:type';

class User { @Reflect.metadata(TYPE_KEY, String) name: string;

@Reflect.metadata(TYPE_KEY, Number) age: number; }

// 读取元数据 const nameType = Reflect.getMetadata(TYPE_KEY, User.prototype, 'name'); console.log(nameType); // [Function: String]

这种机制广泛用于依赖注入容器中，判断构造函数参数类型并自动实例化服务。

高级技巧：自定义参数装饰器与依赖注入

参数装饰器可用于标记参数来源，例如从请求体、查询字符串中提取数据，这在 Web 框架中非常常见。

示例：模拟一个简单的参数装饰器

function Body(target: any, propertyKey: string, parameterIndex: number) { Reflect.defineMetadata('body:param', parameterIndex, target, propertyKey); }

class UserController { createUser(@Body body: { username: string }) { console.log('Received:', body); } }

// 路由层读取元数据并绑定实际数据 const index = Reflect.getMetadata('body:param', UserController.prototype, 'createUser'); // 假设 request.body 已存在 const body = request.body; // 来自 HTTP 请求 controller.createUser(body); // 自动映射

这种模式让控制器方法更清晰，解耦了数据来源与处理逻辑。

基本上就这些。装饰器配合元数据 API 提供了强大的抽象能力，虽然目前仍处于提案阶段，但在 TypeScript 生态中已非常成熟。掌握这些技巧有助于理解现代框架的设计原理，也能提升自身架构能力。

以上就是JavaScript_装饰器与元编程高级技巧的详细内容，更多请关注php中文网其它相关文章！