JavaScript装饰器提案Stage2，Babel插件实现方法装饰

**JavaScript 装饰器：Babel 助力 Stage 3 提案落地，轻松实现方法装饰！** 想提前体验 JavaScript 装饰器的强大功能吗？虽然 JavaScript 装饰器提案目前处于 Stage 3 阶段，尚未正式纳入标准，但通过 Babel 即可在项目中抢先使用！本文详细介绍了如何利用 Babel 配置 `@babel/core`、`@babel/preset-env` 和 `@babel/plugin-proposal-decorators` 插件，并设置版本为 "2023-12"，从而实现对类方法的装饰。无论是实现只读控制的 `readonly` 装饰器，还是用于日志输出的 `log` 装饰器，Babel 都能帮助你轻松修改类方法的行为，提升代码的可维护性和可读性。快来学习如何配置 Babel，让你的 JavaScript 代码更具现代感！

JavaScript装饰器提案处于Stage 3，可通过Babel提前使用。需安装@babel/core、@babel/preset-env和@babel/plugin-proposal-decorators，在配置文件中启用插件并设置version为"2023-12"，然后编写装饰器函数如readonly或log，用于修改类方法行为，实现只读控制、日志输出等功能。

JavaScript 的装饰器（Decorators）提案目前处于 Stage 3 阶段。这意味着它已经非常接近被正式纳入 ECMAScript 标准，但尚未进入最终的 Stage 4。尽管主流浏览器还没有原生支持，但可以通过 Babel 等工具在项目中提前使用这一特性。

如何用 Babel 实现方法装饰

要使用 Babel 支持装饰器，需要正确配置相关插件，并编写符合规范的装饰器函数。以下是具体操作步骤：

确保项目中安装了 Babel 的核心包和装饰器插件：

• @babel/core
• @babel/preset-env
• @babel/plugin-proposal-decorators

在 .babelrc 或 babel.config.js 中启用装饰器插件。注意设置正确的版本以匹配当前提案：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-12" }]
  ],
  "presets": [
    ["@babel/preset-env"]
  ]
}

装饰器是一个函数，接收目标对象、属性键和属性描述符作为参数。通过修改描述符可以改变方法行为：

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

class Person {
  constructor(name) {
    this._name = name;
  }

  @readonly
  getName() {
    return this._name;
  }
}

上面的例子中，@readonly 装饰器阻止了 getName 方法被重写。

可以创建带参数的装饰器，实现日志记录、性能监控等功能：

function log(target, name, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args) {
    console.log(`Calling "${name}" with`, args);
    const result = originalMethod.apply(this, args);
    console.log(`Result:`, result);
    return result;
  };

  return descriptor;
}

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }
}

调用 new Calculator().add(2, 3) 时会自动输出方法名、参数和返回值。

好了，本文到此结束，带大家了解了《JavaScript装饰器提案Stage2，Babel插件实现方法装饰》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！