0

0

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

狼影

狼影

发布时间:2025-11-19 18:31:02

|

972人浏览过

|

来源于php中文网

原创

装饰器和元编程通过@语法在类、方法等上添加行为或元数据,支持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案例教程

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

下载

元编程与 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 生态中已非常成熟。掌握这些技巧有助于理解现代框架的设计原理,也能提升自身架构能力。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

552

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

730

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

475

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

3

2026.01.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 2万人学习

【李炎恢】ThinkPHP8.x 后端框架课程
【李炎恢】ThinkPHP8.x 后端框架课程

共50课时 | 4.4万人学习

nginx浅谈
nginx浅谈

共15课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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