17370845950

装饰器是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;
  };
}

然后在类中使用：

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 说明用途和参数

装饰器不是语法糖，而是元编程入口。它让关注点分离更自然，但也要警惕过度抽象带来的调试难度上升。