装饰器模式通过包装对象动态扩展功能，保持接口一致。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. 日志记录与调试
在不侵入业务逻辑的前提下，为关键函数添加日志输出，便于追踪执行流程和排查问题。
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加
2. 性能监控
通过装饰器测量函数执行时间，适用于 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 装饰器语法仍在演进，生产环境需评估兼容性
