JavaScript装饰器是什么？怎么用它提升类和函数？

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript装饰器是什么？如何用它增强类和函数？》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

JavaScript装饰器是声明式增强类及成员的语法糖，属TC39 Stage 3提案，需Babel或TypeScript编译；本质为接收target/propertyKey/descriptor（方法）或constructor（类）的函数，用于日志、校验、响应式等横切逻辑。

JavaScript 装饰器（Decorators）是一种用于**声明式地增强类、类方法、访问器或参数**的语法特性，目前处于 Stage 3 提案阶段（TC39），尚未被所有环境原生支持，需借助 Babel 或 TypeScript 编译使用。它不是运行时魔法，而是编译期对目标结构进行元编程改造的语法糖。

装饰器的核心作用

装饰器本质是**函数**，接收目标对象（类构造器、方法描述符等）作为参数，返回处理后的新定义（或 void）。它让开发者能以简洁、可复用的方式注入横切关注点，比如日志、权限校验、缓存、重试、响应式绑定等。

常见使用场景包括：

• 给类方法自动添加性能监控或错误捕获
• 为类属性标记响应式依赖（如 Vue 3 的 @Ref、@Watch）
• 在调用前统一校验参数或身份
• 冻结类实例、禁用构造器重复调用等约束逻辑

如何写一个基础方法装饰器

方法装饰器接收三个参数：target（原型对象）、propertyKey（方法名）、descriptor（属性描述符）。你可以修改 descriptor.value 来包装原函数。

例如，实现一个简单的日志装饰器：

function log(target, propertyKey, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`[LOG] 调用 ${String(propertyKey)}，参数：`, args);
    const result = original.apply(this, args);
    console.log(`[LOG] ${String(propertyKey)} 返回：`, result);
    return result;
  };
}

然后在类中使用：

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}
const calc = new Calculator();
calc.add(2, 3); // 控制台输出调用与返回信息

如何写一个类装饰器

类装饰器接收一个参数：constructor（类本身），可返回新构造函数来替换原类。

例如，给类自动添加静态版本号和冻结实例：

function version(v) {
  return function<t extends new any>(constructor: T) {
    constructor.version = v;
    return class extends constructor {
      constructor(...args: any[]) {
        super(...args);
        Object.freeze(this);
      }
    };
  };
}

@version('1.2.0')
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

console.log(User.version); // '1.2.0'
new User('Alice').name = 'Bob'; // 不会报错但无效（已冻结）
</t>

实际使用前要注意的关键点

装饰器目前还不是标准 JavaScript，直接在浏览器或 Node.js 中运行会报语法错误。必须通过工具链启用：

• TypeScript：在 tsconfig.json 中开启 "experimentalDecorators": true 和 "emitDecoratorMetadata": true
• Babel：安装 @babel/plugin-proposal-decorators，并在配置中启用（推荐使用 legacy: false 配合 proposal: "decorators-2023"）
• 装饰器执行顺序：类装饰器 → 属性/方法装饰器（从上到下）→ 方法 descriptor 修改 → 构造器执行
• 不能直接装饰普通函数（如 function foo() {}），仅支持类、类成员、参数（@param 需配合反射 API）

今天关于《JavaScript装饰器是什么？怎么用它提升类和函数？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！