JavaScript装饰器模式详解与实现

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

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

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 实现：

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

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

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

实用场景与注意事项

• 节流/防抖、错误捕获、参数校验、性能监控、权限拦截等都适合用装饰器抽象
• 避免在装饰器中做副作用过重的操作（如异步等待未处理），否则可能破坏原函数调用时序
• 装饰器返回的新函数会丢失原函数的 name 和 length，必要时可用 Object.defineProperty 手动修复
• 箭头函数不能用作被装饰的类方法（无 prototype），且无法正确绑定 this

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript装饰器模式详解与实现》文章吧，也可关注golang学习网公众号了解相关技术文章。