JavaScript中的装饰器（Decorator）如何增强代码功能？-js教程-PHP中文网

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

狼影

发布： 2025-10-03 11:05:02

原创

332人浏览过

装饰器是一种通过@语法为类或成员添加功能的函数，可在不修改原代码情况下实现日志、性能监控等增强。

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

JavaScript中的装饰器（Decorator）是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上，用来在不修改原始代码的情况下增强或修改其行为。它本质上是一个函数，通过包装目标元素来扩展功能，常用于日志记录、权限控制、性能监控等场景。

装饰器的基本语法与使用方式

装饰器使用@符号后跟一个函数名，应用于类或类成员。该函数会在运行时被调用，传入目标对象和描述符等参数。

注意：目前装饰器在JavaScript中仍处于提案阶段（Stage 3），需借助Babel或TypeScript等工具支持。

以类装饰器为例：

function logClass(target: Function) {
  console.log('类被创建:', target.name);
}

@logClass
class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
// 输出：类被创建: Person

登录后复制

这个装饰器在类定义时自动执行，可用于注册类、打日志或添加元数据。

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

方法装饰器实现功能拦截与增强

方法装饰器能捕获方法调用过程，实现如缓存、权限检查或异常处理等功能。

例如，给某个方法添加执行时间统计：

Writecream

AI作家和文案内容生成器

查看详情

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）如何增强代码功能？的详细内容，更多请关注php中文网其它相关文章！