装饰器是一种通过@语法为类或成员添加功能的函数，可在不修改原代码情况下实现日志、性能监控等增强。
JavaScript中的装饰器（Decorator）是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上，用来在不修改原始代码的情况下增强或修改其行为。它本质上是一个函数，通过包装目标元素来扩展功能，常用于日志记录、权限控制、性能监控等场景。
装饰器的基本语法与使用方式
装饰器使用@符号后跟一个函数名，应用于类或类成员。该函数会在运行时被调用，传入目标对象和描述符等参数。
注意：目前装饰器在JavaScript中仍处于提案阶段（Stage 3），需借助Babel或TypeScript等工具支持。
以类装饰器为例：
function logClass(target: Function) { console.log('类被创建:', target.name);}@logClassclass Person { name: string; constructor(name: string) { this.name = name; }}// 输出：类被创建: Person
这个装饰器在类定义时自动执行，可用于注册类、打日志或添加元数据。
立即学习“Java免费学习笔记（深入）”；
方法装饰器实现功能拦截与增强
方法装饰器能捕获方法调用过程，实现如缓存、权限检查或异常处理等功能。
例如，给某个方法添加执行时间统计：
function time(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { console.time(propertyKey); const result = originalMethod.apply(this, args); console.timeEnd(propertyKey); return result; }; return descriptor;}class Calculator { @time add(a: number, b: number) { return a + b; }}const calc = new Calculator();calc.add(2, 3); // 控制台输出执行时间
这里通过替换原方法，在前后插入计时逻辑，实现了非侵入式的性能监控。
属性装饰器与参数装饰器的应用场景
属性装饰器可用于初始化值或标记字段，参数装饰器则常用于依赖注入框架中标识参数来源。
比如用属性装饰器自动绑定this：
function bound(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { return originalMethod.apply(target.prototype, args); }; return descriptor;}function readonly(target: any, propertyKey: string) { Object.defineProperty(target, propertyKey, { writable: false });}
这些小而灵活的装饰器可组合使用，提升代码可读性和复用性。
基本上就这些。装饰器让横切关注点（如日志、校验）从主业务逻辑中剥离，使代码更清晰、更易维护。虽然原生JS尚未完全支持，但在TypeScript项目中已广泛使用，是现代前端开发中提升代码组织能力的重要手段。不复杂但容易忽略的是装饰器的执行顺序和作用时机，合理设计才能避免副作用。
以上就是JavaScript中的装饰器（Decorator）如何增强代码功能？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/32147.html
微信扫一扫 
支付宝扫一扫 
