JavaScript中的装饰器（Decorator）如何增强代码功能？

JavaScript中的装饰器（Decorator）通过@语法为类或成员添加功能，在不修改原代码的情况下实现日志记录、性能监控、权限控制等增强，提升代码的可读性和复用性。 以下是具体说明：

• 装饰器的基本概念与作用装饰器是一种特殊声明，可附加到类声明、方法、访问器、属性或参数上，本质是一个函数，通过包装目标元素扩展功能。其核心优势在于非侵入性，即无需修改原始代码即可增强或修改行为，适用于横切关注点（如日志、校验）的剥离，使主业务逻辑更清晰。目前装饰器处于提案阶段（Stage 3），需借助Babel或TypeScript等工具支持。

• 类装饰器：注册与日志记录类装饰器在类定义时自动执行，常用于注册类、打日志或添加元数据。例如：

  function logClass(target: Function) { console.log('类被创建:', target.name);}@logClassclass Person { name: string; constructor(name: string) { this.name = name; }}// 输出：类被创建: Person

  此装饰器在类创建时打印类名，可用于调试或监控类的实例化过程。

• 方法装饰器：功能拦截与增强方法装饰器能捕获方法调用过程，实现缓存、权限检查、异常处理或性能监控等功能。例如，统计方法执行时间：

  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); // 控制台输出执行时间

  通过替换原方法，在调用前后插入计时逻辑，实现非侵入式性能监控。

• 属性装饰器与参数装饰器

  属性装饰器：用于初始化值、标记字段或修改属性描述符。例如，将属性设为只读：function readonly(target: any, propertyKey: string) { Object.defineProperty(target, propertyKey, { writable: false });}class Example { @readonly name: string = 'fixed';}

  参数装饰器：常用于依赖注入框架，标识参数来源或类型。例如，标记参数需从配置中注入：function injectConfig(target: any, propertyKey: string, parameterIndex: number) { // 存储元数据，供依赖注入系统使用}class Service { constructor(@injectConfig config: string) {}}

• 装饰器的组合使用与代码组织装饰器可组合使用，进一步提升代码复用性。例如，同时实现日志记录和权限检查：

  function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { console.log(`调用方法: ${propertyKey}`); return originalMethod.apply(this, args); }; return descriptor;}function checkPermission(requiredRole: string) { return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: any[]) { if (this.role !== requiredRole) throw new Error('无权限'); return originalMethod.apply(this, args); }; return descriptor; };}class UserService { role: string; @log @checkPermission('admin') deleteUser() { console.log('用户删除'); }}

  通过组合，主业务逻辑（deleteUser）无需关注日志和权限细节，代码更清晰。

• 注意事项

  执行顺序：装饰器按从下到上、从右到左的顺序执行（如@A @B class，先执行@B再@A），需合理设计以避免副作用。

  作用时机：类装饰器在类定义时执行，方法/属性装饰器在属性描述符生成后执行。

  兼容性：原生JavaScript尚未完全支持，但在TypeScript项目中广泛使用，需配置experimentalDecorators: true。

装饰器通过解耦横切关注点，显著提升了代码的可维护性和组织能力，是现代前端开发中重要的高级特性。