当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript装饰器模式详解与实现

JavaScript装饰器模式详解与实现

2026-01-01 19:42:44 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《JavaScript装饰器模式实现方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript装饰器模式核心是用高阶函数封装原函数以增强行为，支持函数和类方法装饰，可用于日志、节流、权限控制等场景，需注意this绑定、参数透传及语法兼容性。

JavaScript如何实现装饰器模式_JavaScript如何扩展函数功能而不修改原函数

JavaScript 中实现装饰器模式的核心思路是：用一个函数包裹另一个函数，在不改动原函数代码的前提下，增强或修改其行为。这本质上是函数式编程中的“高阶函数”思想，ES2019+ 也正式支持类和方法的 @decorator 语法（需编译器支持），但底层逻辑仍基于函数封装。

用高阶函数手动实现函数装饰器

这是最基础、兼容性最好的方式。装饰器本身是一个接收函数作为参数、并返回新函数的函数。

返回的新函数可以添加前置逻辑（如日志、权限检查）、后置逻辑（如清理、上报）、或改写参数/返回值
必须保留原函数的 this 绑定和参数透传，常用 ...args 和 call/apply

例如，实现一个简单的日志装饰器：

使用时：
const add = (a, b) => a + b;
const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 控制台输出调用与返回信息

支持多层装饰与组合（类似管道）

多个装饰器可依次嵌套，形成“装饰链”。为提升可读性和复用性，可封装 compose 或 pipe 工具函数。

compose(f, g) 表示先执行 g，再将结果传给 f（右到左执行）
实际中更常用 pipe（左到右），语义更直观：比如 pipe(throttle(300), logDecorator, catchError)

简易 pipe 实现：

function pipe(...fns) {
  return function(...args) {
    return fns.reduce((acc, fn) => [fn.apply(this, Array.isArray(acc) ? acc : [acc])], args)[0];
  };
}

类方法装饰器（实验性语法，需 Babel / TypeScript）

在类中使用 @ 语法修饰方法时，装饰器函数接收三个参数：target（原型或构造函数）、propertyKey（方法名）、descriptor（属性描述符）。可通过修改 descriptor.value 来包装方法。

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

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

注意：该语法目前处于 Stage 3 提案，需开启 Babel 插件（如 @babel/plugin-proposal-decorators）或使用 TypeScript，并启用 experimentalDecorators 选项。