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

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

2026-01-06 09:48:37 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JavaScript装饰器是什么？如何提升类与方法功能》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

JavaScript 装饰器（@）仍是 Stage 3 提案，未被 ECMAScript 标准采纳，所有浏览器原生不支持；必须经 Babel 或 TypeScript 编译转译为函数调用才能执行，其本质是语法糖而非内置机制。

什么是javascript的装饰器_它如何增强类和方法的特性？

JavaScript 的装饰器（@ 语法）目前仍是 Stage 3 提案，**未被正式纳入 ECMAScript 标准**，所有浏览器原生不支持运行时装饰器；你看到的 @ 写法必须经由 Babel（@babel/plugin-proposal-decorators）或 TypeScript 编译转译后才能执行。

装饰器在 JS 中本质是函数调用语法糖

装饰器不是语言内置机制，而是编译器识别的特殊标记，最终会被展开为普通函数调用。比如：

@readonly
method() { return 'data'; }

等价于：

readonly({ kind: 'method', key: 'method', descriptor: Object.getOwnPropertyDescriptor(...) })

也就是说：@readonly 不是魔法，它只是把目标（类、方法、访问器等）和元信息打包，传给 readonly 函数处理。你写的装饰器函数必须符合提案定义的签名（如接收 { kind, key, descriptor } 对象），否则编译后行为不可控。

TypeScript 中写装饰器要配 `experimentalDecorators`

TypeScript 支持装饰器但默认关闭，需在 tsconfig.json 中显式启用：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": false // 仅当你用 reflect-metadata 时才开
  }
}

experimentalDecorators 是硬性要求，缺则报错 Cannot use decorators here
emitDecoratorMetadata 仅影响是否生成 design:type 等元数据，与装饰器逻辑执行无关
TS 不校验装饰器函数签名，容易写出编译通过但运行时报 descriptor is undefined 的代码

类方法装饰器必须操作 `descriptor.value` 或返回新 descriptor

常见错误是直接修改 descriptor.value 却忘了返回它——Babel/TS 转译后会丢弃整个方法：

function log(target, propertyKey, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${propertyKey} with`, args);
    return original.apply(this, args);
  };
  // ❌ 忘记 return descriptor → 方法消失
  // ✅ 必须显式返回
  return descriptor;
}

其他典型用法包括：