当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript装饰器是什么？如何增强类功能

JavaScript装饰器是什么？如何增强类功能

2026-01-08 22:26:39 0浏览收藏

今天golang学习网给大家带来了《JavaScript装饰器是什么？如何增强类功能》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

装饰器是用于修改类或类成员定义的函数，属 Stage 3 提案，需 Babel/TS 启用；接收 target、name、descriptor 等参数，在类定义时执行，支持类、方法、访问器及（TS 扩展）属性装饰，常用于日志、权限、自动绑定 this 等横切逻辑，但浏览器原生不支持，依赖构建配置且多装饰器间需注意执行与覆盖顺序。

JavaScript什么是装饰器_它如何增强类功能

装饰器是函数，用于修改类或类成员的定义

装饰器本身不是 JavaScript 原生语法（截至 ES2023），而是处于 Stage 3 提案阶段的特性，需通过 Babel 或 TypeScript 启用。它本质是一个接收目标、属性名、描述符等参数的函数，运行时机在类定义时（而非实例化时），作用是“劫持并重写”类结构。

@decorator 语法糖背后是 target、name、descriptor 三元组

当你写 @readonly 修饰一个方法，Babel/TS 实际会把它编译为类似 readonly(Example.prototype, 'method', Object.getOwnPropertyDescriptor(Example.prototype, 'method')) 的调用。关键点在于：

类装饰器：第一个参数是构造函数（target）
方法/访问器装饰器：参数依次为 target（原型或构造器）、name（字符串）、descriptor（属性描述符对象）
属性装饰器（非标准，TS 支持但提案未定）：target 和 name 存在，但 descriptor 为 undefined，只能做元数据标记

常见增强场景：日志、权限、缓存、自动绑定 this

装饰器真正价值在于把横切逻辑从类内部剥离。比如自动绑定 this 可避免箭头函数或 .bind() 冗余：

function autobind(_target: any, _name: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  const adjDescriptor: PropertyDescriptor = {
    configurable: true,
    enumerable: false,
    get() {
      const boundFn = originalMethod.bind(this);
      Object.defineProperty(this, _name, { value: boundFn });
      return boundFn;
    }
  };
  return adjDescriptor;
}

class Component {
  @autobind
  handleClick() {
    console.log(this); // 确保 this 指向实例
  }
}

注意：上述代码依赖 TypeScript 类型注解；纯 JS 需自行判断 descriptor.value 是否为函数，且不能直接返回新描述符（需兼容旧版 Babel 行为）。