JS函数如何定义函数装饰器_JS函数装饰器定义与功能增强方法-js教程-PHP中文网

JS函数如何定义函数装饰器_JS函数装饰器定义与功能增强方法

爱谁谁

发布： 2025-11-08 18:49:02

原创

436人浏览过

函数装饰器是接收函数并返回新函数的高阶函数，用于扩展功能而不修改原函数。例如logDecorator添加日志，retryDecorator支持配置重试次数，适用于日志、监控等场景。

js函数如何定义函数装饰器_js函数装饰器定义与功能增强方法

JavaScript 中虽然没有像 Python 那样的原生装饰器语法，但可以通过高阶函数模拟实现函数装饰器，用于增强或修改函数行为。这种模式在实际开发中常用于日志记录、性能监控、权限校验等场景。

什么是函数装饰器

函数装饰器本质上是一个函数，它接收另一个函数作为参数，并返回一个新函数。这个新函数通常会扩展原始函数的功能，比如添加前置逻辑、后置逻辑，或改变调用方式。

装饰器不修改原函数代码，而是通过包装实现功能增强，符合“开闭原则”。

基本的装饰器实现方式

使用高阶函数定义装饰器是最常见的方式。以下是一个简单的例子：

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

// 使用装饰器
function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 输出调用和返回信息

登录后复制

在这个例子中，logDecorator 是一个装饰器，它包裹了原函数并添加了日志功能。

带参数的装饰器

有时需要为装饰器传入配置项，可以再封装一层函数：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

function retryDecorator(times) {
  return function (fn) {
    return function (...args) {
      let attempts = 0;
      while (attempts < times) {
        try {
          return fn.apply(this, args);
        } catch (error) {
          attempts++;
          if (attempts >= times) throw error;
          console.log(`重试第 ${attempts} 次...`);
        }
      }
    };
  };
}

// 使用
const riskyOperation = retryDecorator(3)(function () {
  if (Math.random() < 0.7) throw new Error("失败！");
  return "成功！";
});

登录后复制

这样就能灵活控制重试次数，适用于网络请求等不稳定操作。

利用 ES6 Proxy 实现更复杂的装饰

对于对象方法的批量装饰，可以用 Proxy 拦截调用过程：

function createLoggedProxy(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      const value = target[prop];
      if (typeof value === 'function') {
        return function (...args) {
          console.log(`调用方法: ${prop}, 参数:`, args);
          const result = value.apply(target, args);
          console.log(`方法返回:`, result);
          return result;
        };
      }
      return value;
    }
  });
}

const api = {
  fetchUser(id) { return `用户${id}`; }
};

const loggedApi = createLoggedProxy(api);
loggedApi.fetchUser(123);

登录后复制

这种方式适合对整个对象的方法进行统一增强，无需逐个包装。

基本上就这些。JS 函数装饰器虽非语言原生特性，但凭借其灵活性，能有效提升代码复用性和可维护性。关键在于理解高阶函数与闭包机制，合理封装通用逻辑。不复杂但容易忽略细节，比如 this 指向和参数传递要处理得当。

以上就是JS函数如何定义函数装饰器_JS函数装饰器定义与功能增强方法的详细内容，更多请关注php中文网其它相关文章！