JavaScript装饰器模式_高阶函数组合应用-js教程-PHP中文网

JavaScript装饰器模式_高阶函数组合应用

幻影之瞳

发布： 2025-11-26 18:37:02

原创

146人浏览过

装饰器模式是一种结构设计模式，它允许向对象添加新功能而不改变其原始结构。在JavaScript中，常通过高阶函数实现，即一个函数接收另一函数作为参数并返回增强后的新函数，从而动态扩展功能。这种模式不修改原函数逻辑，适用于日志记录、权限校验、性能监控等场景。例如，计时装饰器withTiming可包装目标函数，利用console.time记录执行时间，提升代码复用与灵活性。

javascript装饰器模式_高阶函数组合应用

装饰器模式在JavaScript中常通过高阶函数实现，它允许我们在不修改原函数逻辑的前提下，动态扩展其功能。这种组合方式让代码更灵活、可复用性更强，尤其适合处理日志、权限校验、性能监控等横切关注点。

什么是装饰器模式？

装饰器模式是一种结构设计模式，它允许向对象添加新功能，而不改变其原始结构。在JavaScript中，函数是一等公民，因此我们常用高阶函数来实现这一模式——即一个函数接收另一个函数作为参数，并返回增强后的新函数。

这种方式与面向对象语言中的@decorator语法不同，但在函数式编程中更为自然和广泛使用。

高阶函数实现装饰器

高阶函数是实现装饰器的核心机制。我们可以编写通用的包装函数，对目标函数进行拦截或增强。

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

常见应用场景包括：

记录函数执行时间
缓存函数结果（记忆化）
控制函数调用次数（节流/防抖）
捕获异常并处理

例如，实现一个计时装饰器：

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

function heavyCalc(n) {
  let sum = 0;
  for (let i = 0; i < n; i++) sum += i;
  return sum;
}

const timedCalc = withTiming(heavyCalc);
timedCalc(1000000); // 输出执行时间

登录后复制

多个装饰器的组合使用

通过函数组合，可以将多个装饰器叠加应用，形成管道式的增强流程。

知海图Chat

知乎与面壁智能合作推出的智能对话助手

157

查看详情

比如同时添加日志和缓存功能：

function withLog(fn) {
  return function(...args) {
    console.log(`调用 ${fn.name}，参数:`, args);
    const result = fn.apply(this, args);
    console.log(`结果:`, result);
    return result;
  };
}

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log(`缓存命中`);
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

登录后复制

组合多个装饰器时，顺序很重要：

const enhancedFn = withLog(memoize(heavyCalc));
enhancedFn(1000);
enhancedFn(1000); // 命中缓存，但仍会输出日志

登录后复制

如果交换顺序，则缓存层可能先触发而跳过日志，需根据业务需求决定包裹顺序。

实际应用建议

在项目中使用装饰器模式时，注意以下几点：

保持装饰器职责单一，便于复用和测试
确保this指向正确，使用apply或call绑定上下文
合理处理异步函数，返回Promise并在合适时机进行拦截
避免过度包装导致调试困难，必要时提供开关机制

对于异步函数，装饰器也需返回异步逻辑：

function withErrorCatch(fn) {
  return async function(...args) {
    try {
      return await fn.apply(this, args);
    } catch (err) {
      console.error(`调用失败:`, err.message);
      throw err;
    }
  };
}

登录后复制

基本上就这些。装饰器模式结合高阶函数，能极大提升代码的模块化程度，让核心逻辑更专注，增强逻辑更统一。不复杂但容易忽略细节，比如参数透传和上下文绑定，写的时候多留意就行。

以上就是JavaScript装饰器模式_高阶函数组合应用的详细内容，更多请关注php中文网其它相关文章！