为何JavaScript方法装饰器仅传入一个参数？求排查方案

你遇到的问题根源在于Babel装饰器插件使用的规范版本和你编写的装饰器代码不匹配。

为什么参数结构不对？ #

你查阅资料里的装饰器写法基于旧的TC39 Stage 0装饰器提案，而当前@babel/plugin-proposal-decorators插件默认启用的是Stage 3的最新装饰器规范（这是即将成为正式标准的版本）。两者的参数结构完全不同：

• 旧规范（Stage 0）的方法装饰器接收三个参数：target（类原型或实例）、name（方法名）、descriptor（属性描述符）
• 新规范（Stage 3）的方法装饰器只接收一个参数：一个包含kind、key、placement、descriptor的配置对象，也就是你在控制台看到的那个结构

两种解决办法 #

办法一：继续使用旧规范写法（兼容现有代码）

修改你的.babelrc配置，给装饰器插件加上"legacy": true选项，强制启用旧的Stage 0规范：

{
  "presets": [ ["@babel/preset-env"] ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true, "legacy": true }],
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]
  ]
}

修改后，你原来的装饰器代码就能正常接收三个参数了。

办法二：适配新的Stage 3规范（推荐，符合未来标准）

如果是新项目，建议直接适配最新规范编写装饰器，写法如下：

const debug = ({ key: name, descriptor }) => {
  // 保存原方法引用
  const originalMethod = descriptor.value;
  
  // 重写方法逻辑
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with arguments: %o`, args);
    const result = originalMethod.apply(this, args);
    console.log(`result is %o`, result);
    // 务必返回原方法的结果，否则原方法返回值会丢失
    return result;
  };
  
  // 返回修改后的属性描述符
  return descriptor;
};

这个写法和新规范的参数结构匹配，不需要修改你现有的Babel配置。

额外注意 #

• 如果选择legacy模式，要确保装饰器插件的配置放在@babel/plugin-proposal-class-properties之前（你的现有配置已经符合这个要求）
• 新规范的装饰器在类装饰器、访问器装饰器等场景下的行为也和旧规范有差异，若需深入使用，建议参考TC39官方提案的细节

内容的提问来源于stack exchange，提问作者jdoe8227