JavaScript装饰器是什么？如何使用装饰器扩展类和方法？

大家好，今天本人给大家带来文章《JavaScript装饰器是什么？如何用装饰器扩展类和方法？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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 被忽略。

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 绑定、错误包装、缓存逻辑等——很多所谓“装饰器需求”，其实只是需要一个可组合的函数包装机制，而非非得用 @ 符号。

真正容易被忽略的是：装饰器的执行时机在类定义阶段（非实例化时），这意味着所有装饰器函数会在模块加载时立即运行一次；若其中包含副作用（如发请求、改全局状态），可能引发意料之外的初始化问题。

到这里，我们也就讲完了《JavaScript装饰器是什么？如何使用装饰器扩展类和方法？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！