js 实现装饰器
装饰器基础概念
装饰器是一种设计模式，用于在不修改原函数代码的情况下增强其功能。在 JavaScript 中，装饰器通过高阶函数或 ES7 的装饰器语法实现，常用于类、方法或属性。
高阶函数实现装饰器
通过高阶函数（函数返回函数）包裹目标函数，添加额外逻辑：
function logDecorator(fn) {
return function(...args) {
console.log(`调用函数: ${fn.name}, 参数: ${args}`);
return fn.apply(this, args);
};
}
function greet(name) {
return `Hello, ${name}!`;
}
const decoratedGreet = logDecorator(greet);
console.log(decoratedGreet("Alice")); // 输出日志并返回结果ES7 装饰器语法
需配合 Babel 或 TypeScript 使用，通过 @ 符号直接修饰类或方法：
@logClass
class Example {
@readonly
value = 42;
@debounce(300)
handleClick() {
console.log("Clicked!");
}
}
function logClass(target) {
console.log(`装饰类: ${target.name}`);
}
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
function debounce(delay) {
return function(target, key, descriptor) {
let timer;
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
clearTimeout(timer);
timer = setTimeout(() => originalMethod.apply(this, args), delay);
};
return descriptor;
};
}装饰器应用场景
- 日志记录：自动记录函数调用信息。
- 权限校验：在方法执行前检查用户权限。
- 性能优化：实现防抖（debounce）或节流（throttle）。
- 属性保护：通过
@readonly禁止修改属性。
注意事项
- ES7 装饰器需编译工具支持（如 Babel 的
@babel/plugin-proposal-decorators）。 - 装饰器不能用于函数（仅类、方法、属性）。
- 第三方库（如
core-decorators）提供常用装饰器工具。
通过灵活运用装饰器，可以显著提升代码的可维护性和复用性。
