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文件将包含 src 以引入模块的Profile.js。Profile.js文件将导入 User.js 并通过创建User类的对象调用其构造函数。User.js文件将具有一个带有参数的构造函数，它将打印其值以及一些虚拟文本。

index.html

<!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>

Profile.js

// Importing User 
import User from './User.js'; 
  
// Creating new user object 
var user = new User({name:'Lorem Ipsum',lang:'Javascript'}); 
  
// Printing data 
console.log(user);

User.js

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文件的步骤