装饰器模式：在JS中的实现与应用场景-js教程-PHP中文网

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

betcha

发布： 2025-11-27 18:24:02

原创

180人浏览过

装饰器模式通过包装对象动态扩展功能，保持接口一致。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. 性能监控

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

查看详情

通过装饰器测量函数执行时间，适用于 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 组件的行为。