如何使用 Javascript 在单个 index.js 文件中正确导出两个类答案

【问题标题】：How to properly export two classes on a single index.js file using Javascript如何使用 Javascript 在单个 index.js 文件中正确导出两个类
【发布时间】：2019-10-09 00:26:09
【问题描述】：

我有两个不同的课程：

Class1.js

class Class1 { 
    initialize = () => {
        console.log("Class1 Initializer");
    }
}

export default Class1;

Class2.js

class Class2 { 
    initialize = () => {
        console.log("Class2 Initializer");
    }
}

export default Class2;

classes/index.js

import Class1 from "./Class1";
import Class2 from "./Class2";

export default { 
    Class1,
    Class2
}

然后我正在尝试使用这些类：

server.js

import { Class1, Class2 } from "./classes";

...
Class1.initialize() <<<<==== ERROR - Cannot read property `initialize` of undefined.

导入和导出的正确语法是什么？为什么会出现这个错误？

【问题讨论】：

initialize = () => { 是类字段语法-它将是实例的属性，而不是类本身的属性（如果您希望函数成为类本身的属性，请使用静态方法反而）。还有一个导致问题的循环依赖
您正在默认导出对象文字。不要那样做——它也不符合你的导入声明。声明两个命名导出。
@OriDrori 你为什么删除你的答案？这是正确的

标签： javascript ecmascript-6 es6-class

【解决方案1】：

我的理解是，你的导出方法是可以的，这个问题是initialize()是Class1的实例方法造成的。在调用initialize() 之前，您需要创建Class1 的实例。实例化Class1 的一种方法是通过new：

import { Class1, Class2 } from "./classes";

// Create "new" instance of Class1, and then call initialize() on it
(new Class1()).initialize()

【讨论】：

【解决方案2】：

在这里做一些事情。

首先，您在类方法中使用箭头语法。箭头函数不像普通函数那样绑定到它们自己的“this”。我建议重构该代码以反映在下面。对 Class1 和 Class2 执行相同操作。

class Class1 {
    initialize() {
        console.log("Class1 Initializer");
    }
}

第二，如果您使用 ES6 导出语法，则只能有一个默认值。在您的 index.js 文件中，您只想导出 { Class1, Class2}，但不能使用 export default { Class1, Class2 }。

三、你需要先创建一个类的实例，然后才能调用它的方法。您可以创建一个新变量来初始化该类的一个新实例，然后调用该方法，也可以直接在线完成。

new Class2().initialize();

第四，您从一个名为“./classes”的文件中导入。据我所知，这不存在。它应该来自“./index”。

希望这会有所帮助！

【讨论】：

【解决方案3】：

您在对象文字上使用默认值。你不能那样做。

在 classes/index.js 中执行以下操作：

import Class1 from "./Class1";
import Class2 from "./Class2";

export { 
    Class1,
    Class2
}

然后使用：

import * as Classes from "./classes";

然后：

new Classes .Class2().initialize();

顺便问一下上面的例子是怎么运行的？它就像 node server.js?? Node 8.5.0 + 支持 ES6 一样的导入和导出样式和文件扩展名也应该是 .mjs 否则 .js 文件将需要使用需要函数

【讨论】：