在使用 ES6 模块时，我们可能会遇到一个问题：模块导入语句是否会被提升？即使在定义之前，我们是否可以访问导入的变量或函数？
答案是“不会”。在 ES6 模块中，导入语句不会像 var、let 和 function 声明一样被提升。这意味着在使用导入的变量或函数之前，必须先导入它们。
为什么导入不会被提升？
在 ES6 模块中，导入语句是静态解析的，这意味着模块的结构在编译时就已经确定了。因此，不可能在运行时动态地导入模块。相比之下，CommonJS 模块系统在运行时才会加载模块，所以 require() 调用可以位于代码的任何位置。
由于 ES6 模块的静态解析特性，导入语句必须出现在模块的顶部。这使得代码更加可读和易于维护，因为开发人员可以在模块的顶部清楚地看到所有的依赖关系。
示例代码
-- ----------- ------ ----- ----- - ------- -------- ------ -------- -------- - ----------------- -- ---------- - -- ------- ------------------- -- -------- --------------- ----- -- --- ------- ------ - ------ ------ - ---- ---------------- ------------------- -- ------- ------- --------- -- ----- -- --------
在上面的示例中，我们首先定义了一个名为 myModule.js 的模块，并导出了一个变量 myVar 和一个函数 myFunc。然后，在 main.js 中，我们试图访问 myVar 变量，但由于它没有被声明，所以会抛出一个引用错误。然后，我们使用 import 语句导入 myVar 和 myFunc，并成功访问它们。
总结
在 ES6 模块中，导入语句不会被提升。为了正确地使用导入的变量或函数，必须先导入它们。这种行为与 CommonJS 模块系统有所不同，因为 CommonJS 模块是运行时加载的，而 ES6 模块是静态解析的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29657