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）更可控，也更容易调试。
