JS函数如何定义函数装饰器_JS函数装饰器定义与功能增强方法
函数装饰器是接收函数并返回新函数的高阶函数，用于扩展功能而不修改原函数。例如logDecorator添加日志，retryDecorator支持配置重试次数，适用于日志、监控等场景。
JavaScript 中虽然没有像 Python 那样的原生装饰器语法，但可以通过高阶函数模拟实现函数装饰器，用于增强或修改函数行为
。这种模式在实际开发中常用于日志记录、性能监控、权限校验等场景。
什么是函数装饰器
函数装饰器本质上是一个函数，它接收另一个函数作为参数，并返回一个新函数。这个新函数通常会扩展原始函数的功能，比如添加前置逻辑、后置逻辑，或改变调用方式。
装饰器不修改原函数代码，而是通过包装实现功能增强，符合“开闭原则”。
基本的装饰器实现方式
使用高阶函数定义装饰器是最常见的方式。以下是一个简单的例子：
function logDecorator(fn) {
return function(...args) {
console.log(`调用函数: ${fn.name}, 参数:`, args);
const result = fn.apply(this, args);
console.log(`函数返回值:`, result);
return result;
};
}
// 使用装饰器
function add(a, b) {
return a + b;
}
const loggedAdd = logDecorator(add);
loggedAdd(2, 3); // 输出调用和返回信息
在这个例子中，logDecorator 是一个装饰器，它包裹了原函数并添加了日志功能。
带参数的装饰器
有时需要为装饰器传入配置项，可以再封装一层函数：
function retryDecorator(times) {
return function (fn) {
return function (...args) {
let attempts = 0;
while (attempts < times) {
try {
return fn.apply(this, args);
} catch (error) {
attempts++;
if (attempts >= times) throw error;
console.log(`重试第 ${attempts} 次...`);
}
}
};
};
}
// 使用
const riskyOperation = retryDecorator(3)(function () {
if (Math.random() < 0.7) throw new Error("失败！");
return "成功！";
});
这样就能灵活控制重试次数，适用于网络请求等不稳定操作。
利用 ES6 Proxy 实现更复杂的装饰
对于对象方法的批量装饰，可以用 Proxy 拦截调用过程：
function createLoggedProxy(obj) {
return new Proxy(obj, {
get(target, prop) {
const value = target[prop];
if (typeof value === 'function') {
return function (...args) {
console.log(`调用方法: ${prop}, 参数:`, args);
const result = value.apply(target, args);
console.log(`方法返回:`, result);
return result;
};
}
return value;
}
});
}
const api = {
fetchUser(id) { return `用户${id}`; }
};
const loggedApi = createLoggedProxy(api);
loggedApi.fetchUser(123);
这种方式适合对整个对象的方法进行统一增强，无需逐个包装。
基本上就这些。JS 函数装饰器虽非语言原生特性，但凭借其灵活性，能有效提升代码复用性和可维护性。关键在于理解高阶函数与闭包机制，合理封装通用逻辑。不复杂但容易忽略细节，比如 this 指向和参数传递要处理得当。
