我很好奇为什么当我的脚本类型设置为type="module"时，我无法访问浏览器控制台中定义的变量。
下面是一个假设的设置：
<!DOCTYPE html>
<html>
<head>
<div id="containerFirst">...</div>
<div id="differentContainer">...</div>
</head>
<body>
...
</body>
<script type="module" src="module.js"></script>
<script src="normal.js"></script>
</html>
这是两个JS文件，第一个模块.js：
export const firstContainer = document.getElementById('containerFirst');
和正常.js中的类似变量结构：
const otherContainer = document.getElementById('differentContainer');
当我在浏览器中运行它时，我可以访问 normal 中定义的变量.js方法是直接在控制台中键入它，而不是 module.js 中的变量。我希望在这件事上找到一些澄清。 谢谢！
如果您在相关模块代码中的断点上暂停，则可以访问模块变量，但如果您没有暂停，则无法访问模块变量。根据设计，模块中的顶级声明不是全局声明。每个模块都有自己的作用域，有点像它们是一个只被调用一次的函数(这是一个粗略的类比(，所以顶级声明是模块作用域的私有的(当然，除非你导出它们(。