JavaScript装饰器是什么？如何扩展类和方法特性

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《JavaScript装饰器是什么？如何扩展类和方法特性》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

JavaScript装饰器是Stage 3实验性语法，用于声明时修改类/方法/属性行为，需经Babel或TypeScript转译才能运行；本质是接收target、propertyKey、descriptor等参数的函数，通过修改descriptor实现元编程。

JavaScript 装饰器 是一种实验性语法（目前处于 Stage 3 提案），用于在声明时**修改类、方法、访问器、属性或参数的行为**。它本身不改变 JavaScript 的运行时语义，而是通过编译工具（如 Babel、TypeScript）转译为可执行代码，实现“元编程”式的逻辑注入。 你不能直接在浏览器中开箱即用 @decorator 语法——除非你明确配置了转译流程。这是最容易被忽略的前提。

装饰器本质是函数，不是语法糖

一个装饰器就是一个接受目标对象、成员名、属性描述符（或类构造器）作为参数的函数：

function readonly(target, propertyKey, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class User {
  @readonly
  name = 'Alice';
}

上面的 @readonly 实际会被转译为类似 Object.defineProperty(...) 的调用。关键点：

• target 是类的原型（对实例方法）或构造函数（对静态方法/类本身）
• descriptor 可以被修改后返回，从而影响属性行为（如 writable、enumerable、value、get/set）
• 装饰器函数必须有返回值：对方法/属性装饰器，通常要返回修改后的 descriptor；对类装饰器，可返回新构造函数（但会丢失 instanceof 关系）

TypeScript 和 Babel 对装饰器的支持差异

TypeScript 默认启用的是旧版（ES2015-style）装饰器，与当前提案不兼容；Babel 7.22+ 默认使用新版（legacy: false）。两者行为不同，容易导致：

• 方法装饰器中 descriptor.value 在旧版里是原始函数，在新版里可能为 undefined（需用 initializer）
• TypeScript 的 experimentalDecorators 编译选项开启后，仅做类型检查，不生成运行时逻辑 —— 真正生效还得靠 Babel 或 tsc 的 emitDecoratorMetadata + 运行时库（如 reflect-metadata）
• 如果你用 Vite，默认不支持装饰器；需手动添加 @babel/plugin-proposal-decorators 并设 legacy: false

常见用途：日志、防抖、权限校验、自动绑定 this

装饰器适合封装横切逻辑，避免在每个方法里重复写样板代码。例如自动绑定 this：

function autobind(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;
  const adjDescriptor = {
    configurable: true,
    enumerable: false,
    get() {
      const boundFn = originalMethod.bind(this);
      Object.defineProperty(this, propertyKey, {
        value: boundFn,
        configurable: true,
        writable: true,
      });
      return boundFn;
    },
  };
  return adjDescriptor;
}

class Form {
  @autobind
  handleSubmit() {
    console.log(this); // 始终指向实例
  }
}

注意：这个写法依赖 get 懒绑定，不是所有场景都适用；若需立即绑定，得在构造函数中处理，装饰器无法介入构造过程。

装饰器不能解决所有问题，尤其涉及初始化顺序时

比如你想在类实例化后自动注册到某管理器，或依赖某个 ref 已就绪 —— 装饰器在定义阶段就执行，此时实例根本不存在。这类逻辑更适合放在 constructor、connectedCallback（Web Components）或 React 的 useEffect 中。

另一个典型陷阱：@Memoize 类装饰器若试图重写 constructor，会导致继承链断裂、super() 失效、instanceof 判断失败 —— 此时应优先考虑组合式工具函数，而非强行用装饰器“魔改”类结构。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript装饰器是什么？如何扩展类和方法特性》文章吧，也可关注golang学习网公众号了解相关技术文章。