JavaScript 如何导出默认构造函数

export语句用于将一个JavaScript模块绑定到其他模块。为了导出默认构造函数，我们使用export语句并在所需的位置导入模块。在创建类的实例时，会调用相应类的构造函数。

语法：

export default class ClassName{...}

在下面的示例中，我们将在另一个模块中使用JavaScript模块进行导出和导入。但是，跨源请求仅支持HTTPS。因此，我们需要在本地服务器上运行HTML文件。

方法：

创建一个文件 index.html。
创建一个文件 User.js，它将导出模块。
创建另一个文件 Profile.js来导入构造函数并检查是否在创建对象时被调用。
在index.html中添加script-src（注意：由于我们正在导出模块，因此需要添加type=”module”）
项目目录： 我们的项目目录将如下所示。

JavaScript 如何导出默认构造函数

项目目录结构

示例： index.html文件将包含到Profile.js的 src ，其中导入了模块。Profile.js文件将导入User.js并通过创建User类的对象来调用构造函数。User.js文件将有一个构造函数，它接收参数并打印其值以及一些虚拟文本。

<!DOCTYPE html>

<head>
    <script type="module" 
        src="./Profile.js">
    </script>
</head>

<body>
    <div style="color: green; 
                font-size: 35px; 
                margin-left: 100px;">
        Geeks for Geeks
    </div>
    <p style="color: rgb(44, 46, 44); 
                font-size: 20px; 
                margin-left: 100px;">
        Result will be displayed at console
    </p>
</body>

</html>

// 导入User
import User from './User.js';

// 创建新的用户对象
var user = new User({name:'Lorem Ipsum',lang:'Javascript'});

// 打印数据
console.log(user);

export default class User
{
    constructor(params)
    {
        this.name=params.name;
        this.lang=params.lang;
        console.log('constructor of User class called: ');
        console.log(this.name+' is your name.');
        console.log(this.lang+' is your language');
    }
}

在本地服务器上运行HTML文件的步骤