JavaScript装饰器是什么？如何增强类和函数？

JavaScript装饰器是一种处于TC39 Stage 3提案阶段的函数式元编程工具，它不修改原始代码，而是在运行时通过接收目标对象、名称和描述符等参数，灵活“包裹”类、方法、访问器、属性或参数的行为，轻松实现日志记录、权限控制、缓存、防抖、依赖注入等横切关注点——无论你是想为类自动添加版本号、给方法加上调用追踪，还是在框架中构建声明式API，装饰器都以简洁优雅的@语法大幅提升了代码的可读性、复用性与可维护性，虽尚未正式标准化，却早已通过TypeScript和Babel深度融入现代前端开发实践。

JavaScript装饰器是一种用于修改类、方法、访问器、属性或参数行为的语法特性，目前处于TC39提案的第三阶段（Stage 3），尚未正式纳入ECMAScript标准，但已被TypeScript和Babel等工具广泛支持。

装饰器的本质：函数式元编程

装饰器本质上是接收目标对象、成员名、描述符等参数的函数。它不改变原始代码逻辑，而是在运行时“包裹”或“劫持”原有行为，实现横切关注点（如日志、权限、缓存）的复用。

例如，一个简单的@log装饰器可自动打印方法调用信息：

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`调用 ${name}，参数：`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

类装饰器：增强整个类的行为

类装饰器作用于类构造函数，可用于注册、注入依赖、添加静态属性或重写原型。

• 接受单个参数：target（类的构造函数）
• 可返回新构造函数来替换原类（需谨慎，可能破坏 instanceof）
• 常用于框架集成，如Angular的@Component、MobX的@observer

示例：为类自动添加版本号

function version(v) {
  return function(target) {
    target.version = v;
  };
}
@version("1.2.0")
class ApiClient {}
console.log(ApiClient.version); // "1.2.0"

方法与访问器装饰器：控制执行逻辑

这类装饰器最常用，接收三个参数：target（原型或构造函数）、name（方法名）、descriptor（属性描述符），可通过修改descriptor.value或descriptor.get/set来增强行为。

• 可实现防抖、节流、只读校验、异步状态包装（如@loading）
• 能访问this上下文，适合处理实例状态
• 多个装饰器按从下到上顺序执行（类似洋葱模型）

属性与参数装饰器：补充元数据与校验

属性装饰器（@prop）通常用于收集字段信息（如序列化规则），不直接修改行为；参数装饰器（@inject）则常配合依赖注入使用，接收target、name、index（参数索引）。

• 属性装饰器无法直接拦截赋值，需配合Object.defineProperty或Proxy在类初始化时介入
• 参数装饰器本身不运行时生效，主要配合反射API（如Reflect.metadata）存储类型或注入标识
• TypeScript中常用于生成装饰器元数据，供运行时框架读取

到这里，我们也就讲完了《JavaScript装饰器是什么？如何增强类和函数？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！