装饰器是JavaScript中用于修改类、方法等行为的语法特性，以@符号声明，属Stage 3提案，需Babel或TypeScript支持；常用于日志、权限校验等场景，分类型装饰器、方法装饰器等，支持叠加使用但需注意this绑定与执行顺序。
装饰器（Decorator）是 JavaScript 中一种用于修改类、方法、访问器、属性或参数行为的语法特性，它本身是一个函数，能以声明式方式“包装”目标元素，从而在不侵入原始代码的前提下添加新功能。
装饰器的基本形式和使用场景
装饰器以 @ 符号开头，写在被修饰元素的上方。目前属于 Stage 3 提案（TC39），需借助 Babel 或 TypeScript 等工具启用。常见用途包括：日志记录、权限校验、防抖节流、状态绑定、自动注册等。
- 类装饰器：接收类构造函数作为参数，可返回新类或修改原类
- 方法装饰器：接收目标对象、方法名、属性描述符，适合拦截调用、改写执行逻辑
- 访问器/属性装饰器：分别作用于 getter/setter 或实例属性（注意：属性装饰器不直接操作值，常配合初始化逻辑）
一个实用的方法装饰器示例
比如实现一个 @log 装饰器，在方法调用前后打印日志：
function log(target, key, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(`【开始】${key}(${args.join(', ')})`);
const result = original.apply(this, args);
console.log(`【结束】${key} → ${result}`);
return result;
};
}
然后在类中使用：
立即学习“Java免费学习笔记（深入）”；
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
class Calculator {
@log
add(a, b) {
return a + b;
}
}
调用 new Calculator().add(2, 3) 就会输出清晰的执行轨迹。
装饰器与继承、this 绑定的关键细节
装饰器运行时，this 指向的是调用时的实际实例，不是装饰器定义时的作用域。若装饰器内部需要访问类的其他方法或状态，应确保通过 this 正确获取；若涉及异步或回调，注意避免 this 丢失——必要时用箭头函数或显式 bind。
- 多个装饰器叠加时，从下到上执行（类装饰器）或从上到下执行（方法装饰器）
- 装饰器不能直接修改私有字段（#field），但可通过公共方法间接影响
- TypeScript 中装饰器类型需显式标注，否则可能丢失类型信息
实际项目中推荐的实践方式
不建议在生产环境裸写装饰器逻辑。更稳妥的做法是：
- 使用成熟库如 core-decorators 提供的
@autobind、@readonly等标准装饰器 - 在 React + TypeScript 项目中，用装饰器配合 MobX 的
@observer或@action - 自定义装饰器统一放在
decorators/目录，每个导出函数附带 JSDoc 说明用途和参数
装饰器不是语法糖，而是元编程入口。它让关注点分离更自然，但也要警惕过度抽象带来的调试难度上升。
