函数装饰器是接收函数并返回新函数的高阶函数，用于扩展功能而不修改原函数。例如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) 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 指向和参数传递要处理得当。
以上就是JS函数如何定义函数装饰器_JS函数装饰器定义与功能增强方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537183.html
微信扫一扫 
支付宝扫一扫 
