JavaScript装饰器用法全解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript装饰器语法详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

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: "2023-11"（对应提案更新）。注意装饰器执行顺序：从上到下、从外到内，类装饰器最后执行。

和普通高阶函数的区别

装饰器不是运行时魔法，本质仍是函数调用，只是语法更简洁直观。它不改变JavaScript的原型链或执行模型，所有能力都可通过手动包装、Object.defineProperty等方式实现——装饰器只是让这类模式更易读、可复用、利于组合。

基本上就这些。想用好它，关键是理解它修饰的是什么、何时执行、能拿到哪些参数，而不是把它当成黑盒语法糖。

今天关于《JavaScript装饰器用法全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！