装饰器模式通过包装对象动态扩展功能，保持接口一致。1. 使用高阶函数实现日志、性能监控；2. ES装饰器语法支持类和方法增强，如只读、权限控制；3. 手动包装对象方法实现缓存、第三方库扩展。符合开闭原则，可组合多个装饰器，但需注意性能与执行顺序，ES装饰器语法仍处提案阶段。
装饰器模式是一种结构型设计模式，它允许在不修改对象原有功能的基础上，动态地给对象添加新的行为或职责。这种模式通过“包装”对象的方式来扩展其功能，既保持了原有的接口一致性，又实现了灵活的扩展能力。在 JavaScript 中，装饰器模式可以通过函数、高阶函数、ES 装饰器语法（处于提案阶段）等多种方式实现。
JavaScript 中的实现方式
1. 函数装饰器（高阶函数）
最常见的实现方式是使用高阶函数对原函数进行包装：
function logDecorator(fn) { return function(...args) { console.log(`调用函数 ${fn.name}，参数:`, args); const result = fn.apply(this, args); console.log(`函数 ${fn.name} 执行完成，返回值:`, result); return result; };}function add(a, b) { return a + b;}const loggedAdd = logDecorator(add);loggedAdd(2, 3); // 输出日志并返回 5
2. 类与方法装饰器（使用 ES 装饰器语法）
虽然 ES 装饰器尚未正式纳入标准，但在 TypeScript 或 Babel 环境中已被广泛支持：
function readonly(target, name, descriptor) { descriptor.writable = false; return descriptor;}class Calculator { @readonly add(a, b) { return a + b; }}
上面的 @readonly 装饰器阻止了方法被重写，体现了装饰器对行为的控制。
3. 对象属性装饰（手动包装）
也可以直接包装对象的方法：
function timeDecorator(fn) { return function(...args) { console.time(fn.name); const result = fn.apply(this, args); console.timeEnd(fn.name); return result; };}const api = { fetchData() { return new Promise(resolve => { setTimeout(() => resolve("数据加载完成"), 1000); }); }};api.fetchData = timeDecorator(api.fetchData);
常见应用场景
1. 日志记录与调试
在不侵入业务逻辑的前提下，为关键函数添加日志输出，便于追踪执行流程和排查问题。
2. 性能监控
多个微信小程序源码合集
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的“组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
0 查看详情
通过装饰器测量函数执行时间，适用于 API 请求、计算密集型操作等场景。
3. 权限控制与校验
在方法执行前检查用户权限或参数合法性：
function requireAuth(target, name, descriptor) { const original = descriptor.value; descriptor.value = function(...args) { if (!this.isAuthenticated) { throw new Error("未授权访问"); } return original.apply(this, args); }; return descriptor;}
4. 缓存增强（Memoization）
为耗时函数添加缓存机制，避免重复计算：
function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) return cache.get(key); const result = fn.apply(this, args); cache.set(key, result); return result; };}
5. 第三方库扩展
当无法修改第三方对象源码时，可用装饰器模式安全地扩展其功能，比如增强 Vue 或 React 组件的行为。
优势与注意事项
优点：
符合开闭原则：对扩展开放，对修改封闭 功能解耦，职责清晰 可组合多个装饰器，实现链式增强
注意点：
避免过度装饰导致性能下降或逻辑复杂 装饰器顺序可能影响结果，需明确执行顺序 ES 装饰器语法仍在演进，生产环境需评估兼容性基本上就这些。装饰器模式在 JavaScript 中虽无原生完整支持，但凭借其灵活的函数式特性，依然能优雅实现，特别适合需要动态增强行为的场景。
以上就是装饰器模式：在JS中的实现与应用场景的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/863698.html
微信扫一扫 
支付宝扫一扫 
