从不同的 class 调用静态方法在不使用默认值的情况下不起作用

Question

我刚刚完成了一个冗长的调试会话，虽然我解决了这个问题，但我不知道为什么我的解决方案是必要的。

我有一个文件 Update.js 如下所示：

class Update {

  static doThisAfterClick = (event) => {
    console.log("First button clicked!");
  }

  static doThisWhenCalled = (name, age) => {
    console.log("My name is " + name + " and my age is " + age);
  }
}

export default Update;

在Edit.js中导入模块：

let Update = require('./Update');

class Edit {

  static fancyEventHandler = (event) => {
    Update.doThisWhenCalled("Peter", 42);
  }  

}
export default Edit;

之后，在 app.js 中，我添加了一些事件处理程序：

import Edit from "./Edit";
import Update from "./Update";

firstButton.addEventListener('click', Update.doThisAfterClick);

secondButton.addEventListener('click', Edit.fancyEventHandler);

现在是最疯狂的部分：单击 firstButton 按预期记录 First button clicked!，但单击 secondButton 出现错误：Uncaught TypeError: Update.doThisWhenCalled is not a function..

我实际上试图通过插入

来调试它

let x = Update.doThisWhenCalled;
debugger;

进入 fancyEventHandler() 并看到 x 未定义。

幸运的是我发现我可以使用

Update.default.doThisWhenCalled("Peter", 42);

而不是，这解决了问题。不知道为什么。

直接调用静态方法有什么问题？这个“默认”是什么属性?

Answer 1

我认为这与您 exporting/importing 的方式有关，以下是可能的解决方法：

Update.js:

class Update {
  static doThisAfterClick() {
    console.log("First button clicked!");
  }
  static doThisWhenCalled(name, age) {
    console.log("My name is " + name + " and my age is " + age);
  }
}

export default Update;

Edit.js:

import Update from "./Update";

class Edit {
  static fancyEventHandler() {
    Update.doThisWhenCalled("Peter", 42);
  }
}

export default Edit;

从不同的 class 调用静态方法在不使用默认值的情况下不起作用

Calling static method from different class doesn't work without using default

javascript

ecmascript-6

module