javascript函数装饰器本质是利用闭包捕获目标函数与配置，在不修改原函数前提下返回新函数以增强行为；支持日志、性能监控、重试等场景，可通过工厂函数和compose实现灵活组合。
JavaScript 中的函数装饰器本质是利用闭包捕获目标函数和额外逻辑，在不修改原函数的前提下增强其行为。核心在于返回一个新函数，该函数内部调用原函数，并在其前后插入自定义逻辑。
闭包是装饰器的底层支撑
装饰器函数本身必须返回一个函数，而这个返回函数需要访问外部作用域中的参数（如被装饰的函数、配置选项等）。闭包让返回函数能持续持有这些变量，即使装饰器执行完毕，上下文依然可用。
- 装饰器接收目标函数作为参数，可能还接收配置项（如日志开关、重试次数）
- 内部定义并返回一个新函数，该函数在调用时执行增强逻辑 + 原函数
- 原函数和配置项被闭包“记住”，每次调用装饰后函数时都能访问
实现一个通用日志装饰器
以记录函数执行时间为例，装饰器接收函数 fn，返回一个包装函数，该函数自动打印开始/结束信息及耗时。
function logDecorator(fn) {
return function(...args) {
const start = Date.now();
console.log(`[LOG] ${fn.name} 开始执行`);
const result = fn.apply(this, args);
const end = Date.now();
console.log(`[LOG] ${fn.name} 执行完成，耗时 ${end - start}ms`);
return result;
};
}
<p>// 使用
const add = (a, b) => a + b;
const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 输出日志并返回 5
</p>
支持配置的装饰器工厂
更实用的装饰器应支持传入选项。通过两层函数形成闭包：外层接收配置，内层接收目标函数，最内层返回增强函数。
- 第一层闭包保存配置（如是否启用、前缀文本）
- 第二层闭包保存目标函数和配置的组合状态
- 最终返回的函数可多次复用，且每次装饰都独立维护自己的闭包环境
function withTiming(enabled = true, prefix = '') {
return function(fn) {
return function(...args) {
if (!enabled) return fn.apply(this, args);
const start = performance.now();
const result = fn.apply(this, args);
const end = performance.now();
console.log(`${prefix}${fn.name} 耗时: ${(end - start).toFixed(2)}ms`);
return result;
};
};
}
<p>// 创建带配置的装饰器
const timing = withTiming(true, '[PERF] ');
const fastFn = timing(() => Math.random());
fastFn(); // 输出带前缀的性能日志
</p>
组合多个装饰器
利用闭包链式调用，可将多个装饰器依次应用。每个装饰器只关心自己逻辑，通过 return 新函数把控制权交给下一个。
- 装饰器顺序影响执行顺序：从右到左包裹（类似 compose）
- 推荐写法：
const decorated = decorator3(decorator2(decorator1(original))) - 也可封装 compose 工具函数，让闭包链更清晰
const compose = (...fns) => (fn) =>
fns.reduceRight((acc, decorator) => decorator(acc), fn);
<p>const withLog = logDecorator;
const withRetry = (fn, max = 3) => (...args) => {
for (let i = 0; i </p><p>const robustFn = compose(withRetry, withLog)(fetchData);
</p>
不复杂但容易忽略
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
