JavaScript装饰器是什么？如何提升类和函数功能

大家好，我们又见面了啊~本文《JavaScript装饰器是什么？如何增强类和函数》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

JavaScript装饰器是处于TC39 Stage 3的语法特性，本质为接收目标、名称、描述符等参数的函数式元编程工具，用于在运行时包裹行为以实现日志、权限等横切关注点；支持类、方法、访问器、属性及参数五种类型，各具不同参数与用途。

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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！