如果我在 JavaScript 中使用 import *，如何访问 class 名称？

Question

在index.html的头部内部：

<script src="main.js" type="module"></script>

user.js文件：

export default class User {

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

}

export function printName(user) {
    console.log(`User's name is ${user.name}`);
}

export function printAge(user){
    console.log(`User is ${user.age} years old`);
}

这个main.js可以工作：

import User, { printName, printAge } from '/user.js'
const user = new User('Bob', 11);
console.log(user)
printName(user)

但这不起作用，因为它无法识别导出的 class

// name User if I use `import *` to import everything:
import * as MyUser from '/user.js'
const user = new MyUser.User('Bob', 11);
console.log(user)
printName(user)

这是我得到的错误： Uncaught TypeError: MyUser.User is not a constructor

Answer 1

您默认导出了 class，因此它将在命名空间MyUser.default上以 MyUser.default 的形式提供。

如果您想以.User身份访问它，请不要使用默认导出。 对于导出多个绑定（具有明确的主要绑定）的任何模块，我都会推荐此方法。 如果用户可以写import User from …而不是import { User } from …很重要，您还可以以多个名称导出 class：

export class User {…}
export { User as default }