什么是javascript装饰器_如何用它增强类的功能【教程】_技术教程

JavaScript 装饰器尚未标准化，@decorator 语法处于 TC39 Stage 3，需 Babel/TypeScript 编译或 polyfill；仅支持类及成员，不支持函数；类装饰器修改构造函数，方法装饰器通过 descriptor 包装逻辑；TS 与 Babel 装饰器协议不兼容，reflect-metadata 仅为元数据基础设施。

装饰器在 JavaScript 中还没正式成为标准语法

目前 @decorator 语法仍处于 TC39 Stage 3 提案阶段，未被所有环境原生支持（比如 Node.js 默认不启用，Chrome/Firefox 也不默认解析）。直接写 @log 会报 SyntaxError: Unexpected token '@'。想用，必须配 Babel 或 TypeScript 编译；纯浏览器环境需依赖 core-js 或 reflect-metadata 等 polyfill，且仅对类和类成员生效，不能用于函数或普通对象。

类装饰器：修改类本身的行为

类装饰器是一个接收 constructor 的函数，返回新构造函数或原样返回，常用于注入逻辑、打日志、注册元信息：

function readonly(target) {
  Object.defineProperty(target.prototype, 'isReadOnly', {
    value: true,
    writable: false,
    configurable: false
  });
  return target;
}

@readonly
class Config {}
console.log(new Config().isReadOnly); // true

装饰器函数必须显式 return，否则类会被替换成 undefined
不能在装饰器里直接改 target.prototype 的可枚举性——除非你清楚 for...in 和 Object.keys() 的行为差异
Babel 默认使用 legacy 装饰器模式（类似 TypeScript experimentalDecorators），与提案标准不兼容；若用新提案，需开启 decorators-legacy: false 并配合 @babel/plugin-proposal-decorators

方法装饰器：拦截或包装实例方法

方法装饰器接收三个参数：target（原型对象）、propertyKey（方法名）、descriptor（属性描述符），适合加日志、防抖、权限校验：

function log(target, propertyKey, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`[${propertyKey}] called with`, args);
    return original.apply(this, args);
  };
}

class ApiClient {
  @log
  fetch(url) {
    return Promise.resolve(`data from ${url}`);
  }
}

descriptor.value 是原始方法，必须用 apply 或 call 绑定 this，否则丢失上下文
若方法是 async，装饰后返回的仍是 Promise，但错误不会自动被捕获——需要手动 try/catch 包裹 original
多个装饰器从上到下执行，但包装顺序是从下到上（类似洋葱模型），@A @B method() 中 B 先包装，A 再包一层

TypeScript 用户要注意的兼容陷阱

TypeScript 的 experimentalDecorators 默认走的是旧版装饰器协议（不支持 initialize 钩子、不支持装饰器工厂返回函数），且与 Babel 新提案互不兼容。一旦你在 tsconfig.json 开了这个选项，又用 Babel 编译，大概率出现 Cannot read property 'kind' of undefined 这类报错。

统一工具链：要么全用 TS + experimentalDecorators + emitDecoratorMetadata，要么全用 Babel
+ @babel/plugin-proposal-decorators（并禁用 TS 的装饰器）
reflect-metadata 只提供 Reflect.defineMetadata 等 API，它本身不实现装饰器逻辑，只是配套基础设施；漏引会导致 Reflect.getMetadata is not a function
装饰器无法访问类的泛型参数，class Box { @log get value(): T { ... } } 中 T 在运行时已擦除，装饰器拿不到