装饰器是JavaScript中用于增强类及成员行为的元编程工具，本质为接收目标、属性名和描述符的函数，通过@符号使用。它在代码定义时执行，支持类、方法、属性等装饰。类装饰器操作构造函数，可用于添加静态属性、自动注册或冻结类，如version装饰器为类标记版本号；方法装饰器利用描述符控制方法行为，可实现缓存、防抖等功能，如memo装饰器缓存函数结果。尽管处于Stage 3阶段，但TypeScript和Babel已支持，建议用于日志、权限等横切关注点，避免复杂逻辑以保持可读性，并注意this指向与配置experimentalDecorators选项。
JavaScript装饰器是元编程的重要工具，能让我们在不修改目标代码的前提下，增强或改变类及其成员的行为。虽然目前装饰器仍处于提案阶段（Stage 3），但已被TypeScript和Babel广泛支持，实际开发中已可安全使用。
什么是装饰器
装饰器本质上是一个函数，用来“包装”类或类的属性、方法、访问器或参数。它在代码定义时执行，而非运行时调用，属于静态元编程的一种。
装饰器通过@符号使用，写在类或成员上方。例如：
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
class MyClass {
@readonly
getName() {
return "hello";
}
}
上面的@readonly装饰器将方法设为不可写，防止被重写。
立即学习“Java免费学习笔记（深入）”；
类装饰器：控制类的整体行为
类装饰器接收一个参数：类的构造函数。可用于扩展类、替换类，或记录类信息。
常见用途包括自动注册类、添加静态属性、封装日志等。
- 添加元数据
- 自动注册服务
- 冻结类结构
示例：自动打标版本
function version(ver) {
return function(constructor) {
constructor.version = ver;
return class extends constructor {
getVersion() {
return ver;
}
};
};
}
@version("1.0.0")
class App {}
console.log(App.version); // "1.0.0"
方法与属性装饰器：精细控制成员
方法装饰器接收三个参数：target（原型对象或构造函数）、key（属性名）、descriptor（属性描述符）。
利用descriptor，可以实现缓存、防抖、权限校验等功能。
- 缓存函数结果
- 捕获异常并处理
- 限制执行频率
示例：实现简单的缓存装饰器
function memo(target, key, descriptor) {
const fn = descriptor.value;
const cache = new Map();
descriptor.value = function(...args) {
const keyStr = args.join("-");
if (cache.has(keyStr)) {
return cache.get(keyStr);
}
const result = fn.apply(this, args);
cache.set(keyStr, result);
return result;
};
}
实用建议与注意事项
装饰器强大，但需谨慎使用。过度使用会降低代码可读性，增加调试难度。
- 优先用于横切关注点，如日志、监控、权限
- 避免在装饰器中做复杂逻辑，保持职责单一
- 注意this指向，尤其是高阶装饰器嵌套时
- 在TypeScript中启用experimentalDecorators选项
基本上就这些。掌握装饰器，能让你写出更优雅、可复用的代码，是进阶元编程的关键一步。
