什么是JavaScript的装饰器语法？

幻影之瞳 2025-12-21 00:00:00 次阅读

JavaScript装饰器是处于TC39 Stage 3的语法糖，用于修饰类、方法、访问器或属性，以@开头，本质是接收目标、名称、描述符等参数的函数，需配置experimentalDecorators支持，执行顺序为从上到下、从外到内。

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

装饰器的基本形式

装饰器是一个函数，接收目标对象、成员名和描述符等参数，可返回新的描述符或直接修改原行为。它以@符号开头，写在被修饰项上方：

类装饰器：作用于整个类，接收类构造函数作为参数
方法/访问器装饰器：接收目标对象、属性名、属性描述符
属性装饰器（实验性）：仅接收目标对象和属性名（不传描述符，无法直接拦截赋值）

一个实用的例子

比如用装饰器实现自动绑定类方法到实例，避免this丢失：

function autobind(target, key, descriptor) {
  const original = descriptor.value;
  return {
    configurable: true,
    enumerable: false,
    get() {
      const bound = original.bind(this);
      Object.defineProperty(this, key, { value: bound });
      return bound;
    }
  };
}

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

使用前要注意的事

装饰器依赖experimentalDecorators配置。TypeScript需在tsconfig.json中开启；Babel需安装@babel/plugin-proposal-decorators并配置legacy: true或version: "2025-11"（对应提案更新）。注意装饰器执行顺序：从上到下、从外到内，类装饰器最后执行。