装饰器模式是一种结构设计模式，它允许向对象添加新功能而不改变其原始结构。在JavaScript中，常通过高阶函数实现，即一个函数接收另一函数作为参数并返回增强后的新函数，从而动态扩展功能。这种模式不修改原函数逻辑，适用于日志记录、权限校验、性能监控等场景。例如，计时装饰器withTiming可包装目标函数，利用console.time记录执行时间，提升代码复用与灵活性。
装饰器模式在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); // 输出执行时间
多个装饰器的组合使用
通过函数组合，可以将多个装饰器叠加应用，形成管道式的增强流程。
比如同时添加日志和缓存功能：
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;
}
};
}
基本上就这些。装饰器模式结合高阶函数，能极大提升代码的模块化程度，让核心逻辑更专注，增强逻辑更统一。不复杂但容易忽略细节，比如参数透传和上下文绑定，写的时候多留意就行。
