当前位置：首页 > 文章列表 > 文章 > 前端 > 装饰器模式在JS中的使用方法

装饰器模式在JS中的使用方法

2025-12-25 11:40:28 0浏览收藏

珍惜时间，勤奋学习！今天给大家带来《装饰器模式在JS中的应用与实现》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

装饰器模式通过包装对象动态扩展功能，保持接口一致。1. 使用高阶函数实现日志、性能监控；2. ES装饰器语法支持类和方法增强，如只读、权限控制；3. 手动包装对象方法实现缓存、第三方库扩展。符合开闭原则，可组合多个装饰器，但需注意性能与执行顺序，ES装饰器语法仍处提案阶段。

装饰器模式：在JS中的实现与应用场景

装饰器模式是一种结构型设计模式，它允许在不修改对象原有功能的基础上，动态地给对象添加新的行为或职责。这种模式通过“包装”对象的方式来扩展其功能，既保持了原有的接口一致性，又实现了灵活的扩展能力。在 JavaScript 中，装饰器模式可以通过函数、高阶函数、ES 装饰器语法（处于提案阶段）等多种方式实现。

JavaScript 中的实现方式

1. 函数装饰器（高阶函数）

最常见的实现方式是使用高阶函数对原函数进行包装：

function logDecorator(fn) {
  return function(...args) {
    console.log(`调用函数 ${fn.name}，参数:`, args);
    const result = fn.apply(this, args);
    console.log(`函数 ${fn.name} 执行完成，返回值:`, result);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 输出日志并返回 5

2. 类与方法装饰器（使用 ES 装饰器语法）

虽然 ES 装饰器尚未正式纳入标准，但在 TypeScript 或 Babel 环境中已被广泛支持：

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Calculator {
  @readonly
  add(a, b) {
    return a + b;
  }
}

上面的 @readonly 装饰器阻止了方法被重写，体现了装饰器对行为的控制。

3. 对象属性装饰（手动包装）

也可以直接包装对象的方法：

function timeDecorator(fn) {
  return function(...args) {
    console.time(fn.name);
    const result = fn.apply(this, args);
    console.timeEnd(fn.name);
    return result;
  };
}

const api = {
  fetchData() {
    return new Promise(resolve => {
      setTimeout(() => resolve("数据加载完成"), 1000);
    });
  }
};

api.fetchData = timeDecorator(api.fetchData);

常见应用场景

1. 日志记录与调试

在不侵入业务逻辑的前提下，为关键函数添加日志输出，便于追踪执行流程和排查问题。

2. 性能监控

通过装饰器测量函数执行时间，适用于 API 请求、计算密集型操作等场景。

3. 权限控制与校验

在方法执行前检查用户权限或参数合法性：

function requireAuth(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    if (!this.isAuthenticated) {
      throw new Error("未授权访问");
    }
    return original.apply(this, args);
  };
  return descriptor;
}

4. 缓存增强（Memoization）

为耗时函数添加缓存机制，避免重复计算：

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

5. 第三方库扩展

当无法修改第三方对象源码时，可用装饰器模式安全地扩展其功能，比如增强 Vue 或 React 组件的行为。