装饰器通过非侵入方式为类和方法添加日志、性能监控、缓存等功能，提升代码可维护性与结构清晰度。
JavaScript装饰器虽然还是实验性特性，但已在实际项目中展现出强大价值。它能让你在不侵入业务逻辑的前提下，为类、方法或属性动态添加新功能，代码更清晰也更容易维护。
日志与调试增强
开发过程中经常需要追踪函数调用情况，装饰器可以统一处理这类需求。
通过方法装饰器，在函数执行前后自动打印日志，无需在每个函数里手动写console.log。
- 记录方法名、参数和返回值，快速定位问题
- 区分不同模块的日志前缀，比如'[API]'或'[UI]'
- 生产环境可全局关闭，不影响性能
一个简单的日志装饰器工厂：
立即学习“Java免费学习笔记（深入）”；
function log(prefix) {
return function(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`${prefix} ${name} called with`, args);
const result = original.apply(this, args);
console.log(`${prefix} ${name} returned`, result);
return result;
};
return descriptor;
};
}
<p>class Calculator {
@log('[MATH]')
add(a, b) { return a + b; }
}
性能监控与耗时统计
对于关键接口或数据请求，了解执行时间至关重要，装饰器是实现性能监控的理想方式。
包装目标方法，自动计算并输出执行耗时，帮助发现性能瓶颈。
- 监控API请求、复杂计算或渲染函数的响应时间
- 结合performance.now()获得高精度时间戳
- 可集成到上报系统，持续跟踪应用健康度
示例：给数据服务添加性能监控
function perfMonitor(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = async function(...args) {
const start = performance.now();
const result = await original.apply(this, args);
const duration = performance.now() - start;
console.log(`${name} took ${duration.toFixed(2)}ms`);
return result;
};
return descriptor;
}
<p>class DataService {
@perfMonitor
async fetchData() {
// 模拟网络请求
return new Promise(r => setTimeout(r, 500));
}
}
行为控制与功能扩展
装饰器非常适合处理权限校验、防抖节流、缓存等横切关注点。
将通用控制逻辑抽离成装饰器，多个方法可以复用同一套规则。
- 为敏感操作添加权限检查，无权时直接中断执行
- 给频繁触发的方法（如搜索框输入）加上防抖装饰器
- 对耗时且结果稳定的函数做结果缓存，提升响应速度
例如实现一个简单的缓存装饰器：
function cache(target, name, descriptor) {
const original = descriptor.value;
const cacheStore = new Map();
descriptor.value = function(...args) {
const key = JSON.stringify(args);
if (cacheStore.has(key)) {
console.log('Cache hit');
return cacheStore.get(key);
}
const result = original.apply(this, args);
cacheStore.set(key, result);
return result;
};
}
基本上就这些常见用法。装饰器让代码职责更分明，把核心逻辑和辅助功能分开，结构更干净。现在主流框架像Angular已深度集成，React社区也有类似高阶组件的实践，掌握它对提升工程能力很有帮助。
