17370845950

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

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 } 对象），否则编译后行为不可控。

立即学习“Java免费学习笔记（深入）”；

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;
}

其他典型用法包括：

• 用 Object.defineProperty 改写 get/set 访问器
• 对 kind: 'field'（类字段）装饰器，需处理 initializer 而非 descriptor
• 类装饰器接收 { kind: 'class', elements }，可过滤或重写 elements 数组

浏览器里没 @，别在 .mjs 或 Deno 原生环境直接跑

Node.js（v20+）、Deno、Vite 默认都不解析 @ 装饰器语法。如果你看到 SyntaxError: Unexpected token '@'，不是配置问题，是根本没经过转译。

• Vite 需配 build.target + esbuild 插件或改用 swc（支持装饰器）
• Deno 1.40+ 仍不支持，必须用 deno task 调 Babel 或先转成 JS 再 run
• Chrome DevTools 控制台粘贴带 @ 的代码？直接报错，连尝试都省了

真要运行时增强逻辑，用高阶函数或代理（Proxy）更可控，也更容易调试。