JavaScript装饰器模式的核心是通过包装原有对象或函数，在不改变其原有结构的基础上扩展新功能，而高阶函数作为可以接收函数作为参数或返回函数的函数，是实现装饰器模式的天然载体，两者结合能大幅提升代码的灵活性。
装饰器模式与高阶函数基础
装饰器模式的本质是功能增强，避免了通过继承扩展功能带来的类层级膨胀问题。在JavaScript中，函数是一等公民，高阶函数可以直接对目标函数进行包装，生成具备新能力的新函数，这正好契合装饰器模式的实现需求。
高阶函数需要满足以下两个条件之一：接收函数作为参数，或者返回一个新的函数。常见的Array.prototype.map、Array.prototype.filter都属于高阶函数的应用。
基础装饰器实现示例
我们可以先实现一个最简单的日志装饰器，为目标函数添加执行前后的日志输出能力：
// 基础装饰器函数，接收目标函数作为参数
function logDecorator(targetFunc) {
// 返回新的包装函数
return function(...args) {
console.log('函数开始执行，参数：', args);
const result = targetFunc.apply(this, args);
console.log('函数执行结束，结果：', result);
return result;
};
}
// 原始业务函数
function add(a, b) {
return a + b;
}
// 使用装饰器包装原始函数
const decoratedAdd = logDecorator(add);
// 调用包装后的函数
decoratedAdd(1, 2);
高阶函数组合实现多层装饰
单个装饰器只能添加一种功能，实际场景中往往需要给函数添加多种增强能力，这时候就可以通过高阶函数组合实现多层装饰器的嵌套。
我们可以再定义一个性能监控装饰器，和日志装饰器组合使用：
// 性能监控装饰器
function performanceDecorator(targetFunc) {
return function(...args) {
const startTime = Date.now();
const result = targetFunc.apply(this, args);
const endTime = Date.now();
console.log('函数执行耗时：', endTime - startTime, 'ms');
return result;
};
}
// 组合两个装饰器
const finalFunc = performanceDecorator(logDecorator(add));
// 调用组合后的函数
finalFunc(3, 4);
如果装饰器数量较多，我们可以封装一个通用的装饰器组合函数，按顺序执行所有装饰器：
// 装饰器组合函数，接收多个装饰器作为参数
function composeDecorators(...decorators) {
return function(targetFunc) {
// 从后往前依次应用装饰器
return decorators.reduceRight((currentFunc, decorator) => {
return decorator(currentFunc);
}, targetFunc);
};
}
// 使用组合函数生成最终装饰器
const combinedDecorator = composeDecorators(performanceDecorator, logDecorator);
const finalCombinedFunc = combinedDecorator(add);
// 调用最终函数
finalCombinedFunc(5, 6);
装饰器模式的应用场景
- 日志记录：为接口请求、业务操作函数添加统一的日志输出，无需在每个函数内部重复写日志代码
- 权限校验：在接口处理函数前添加权限验证装饰器，校验通过再执行原有逻辑
- 缓存优化：为计算类函数添加结果缓存装饰器，相同参数直接返回缓存结果，减少重复计算
- 错误处理：统一包装函数的错误捕获逻辑，避免每个函数都写try catch代码块
注意事项
使用装饰器模式时需要注意，包装后的函数会丢失原有函数的名称和长度属性，如果需要保留这些信息，可以在装饰器内部手动赋值：
function namePreserveDecorator(targetFunc) {
const decorated = function(...args) {
return targetFunc.apply(this, args);
};
// 保留原函数名称
Object.defineProperty(decorated, 'name', {
value: targetFunc.name,
configurable: true
});
// 保留原函数长度
Object.defineProperty(decorated, 'length', {
value: targetFunc.length,
configurable: true
});
return decorated;
}
另外装饰器嵌套层数过多可能会影响代码的调试难度，建议根据实际需求合理控制装饰器的数量，避免过度设计。
JavaScript装饰器模式高阶函数函数组合修改时间：2026-06-29 04:27:23