JavaScript装饰器尚未标准化，原生引擎不支持@语法，直接运行报SyntaxError；需Babel或TS编译，且各方案参数、行为差异大，执行时机在类定义阶段。
JavaScript 的装饰器目前仍是 Stage 3 提案，尚未正式进入语言标准，所有使用都依赖编译器（如 Babel）或运行时支持（如 TypeScript），原生 JavaScript 引擎（Chrome、Node.js 等）默认不识别 @decorator 语法，直接运行会报 SyntaxError: Unexpected token '@'。
为什么 @ 语法在浏览器里直接报错？
因为装饰器语法不是 ECMAScript 当前标准的一部分。V8 引擎、SpiderMonkey 等主流 JS 引擎未启用该特性，即使 Node.js 20+ 启用了 --harmony-decorators 实验标志，也仅限于极简的“装饰器元数据”基础支持，不兼容 TypeScript 或 Babel 常用的函数式装饰器模式。
- Chrome / Firefox / Safari：完全不解析
@，抛出语法错误 - Node.js（v20.10+）：需显式启动
node --harmony-decorators script.js，但只支持提案早期版本（无参数、无返回值重写） - TypeScript：通过
experimentalDecorators: true编译为普通函数调用，实际运行的是转换后的代码，不是原生装饰器
如何用 Babel 正确启用类装饰器？
Babel 是目前最稳定、最接近 TypeScript 体验的方案，关键在于匹配正确的插件与配置版本。Babel 7.24+ 默认使用提案的「2023 年修订版」（即 tc39/proposal-decorators v2），它改变了装饰器签名和执行顺序。
- 必须安装：
@babel/plugin-proposal-decorators（不是旧版legacy插件） -
.babelrc配置中禁用legacy: true，否则与现代装饰器行为冲突 - 装饰器函数接收的参数结构变了：方法装饰器现在是
(descriptor) => descriptor，不再是(target, name, descriptor) => {...}
import { test } from 'vitest';
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;
}
class Calculator {
@log
add(a, b) {
return a + b;
}
}
⚠️ 注意：上面这段代码在 Babel 中能跑，是因为 Babel 把 @log 编译成了对 log(Calculator.prototype, 'add', ...) 的调用；但如果你用的是 Babel 7.22 之前的版本，且启用了 legacy: true，参数顺序和返回值规则完全不同，混用会导致 descriptor 被忽略。
立即学习“Java免费学习笔记（深入）”；
TypeScript 中装饰器为何有时不生效？
TypeScript 只做编译时转换，不提供运行时支持。常见失效原因不是语法写错，而是：
-
tsconfig.json里漏了"experimentalDecorators": true（必需） - 没配
"emitDecoratorMetadata": true（仅当你用reflect-metadata读取类型信息时才需要） - 装饰器函数本身有异步逻辑或依赖未加载的模块（比如在装饰器里调用
await import('./x')），而 TS 不会等它完成——装饰器必须是同步函数 - 对私有字段（
#field）使用装饰器：TS 目前不支持，Babel 也不支持，会直接报错
替代原生装饰器的轻量方案
如果项目不能引入 Babel/TS，或需要 100% 运行时可控，可用「手动高阶函数」模拟核心能力，语义清晰、零编译、调试友好：
function withLogging(fn, name = fn.name) {
return function(...args) {
console.log(`[${name}] start`, args);
const result = fn.apply(this, args);
console.log(`[${name}] end →`, result);
return result;
};
}
class ApiClient {
fetchUser = withLogging(async function(id) {
return await fetch(`/api/users/${id}`).then(r => r.json());
}, 'fetchUser');
}
这种写法绕过语法限制，还能自由控制 this 绑定、错误包装、缓存逻辑等——很多所谓“装饰器需求”，其实只是需要一个可组合的函数包装机制，而非非得用 @ 符号。
真正容易被忽略的是：装饰器的执行时机在类定义阶段（非实例化时），这意味着所有装饰器函数会在模块加载时立即运行一次；若其中包含副作用（如发请求、改全局状态），可能引发意料之外的初始化问题。
