是否可以更改最初相同范围的变量范围？答案

【问题标题】：is it possible to change the scope of variables with initially equal scopes?是否可以更改最初相同范围的变量范围？
【发布时间】：2021-09-18 22:23:54
【问题描述】：

我想知道我是否可以使变量的范围超出模块脚本标签，或者我是否可以以某种方式将其导出并导入另一个脚本标签。

我当前的代码是这样的：

<script>
    var variable1 = 'first variable :)';
    var variable2 = 'second variable :)';
</script>
<script>
    // i want to be able to access variable1 here, but not variable2
</script>

这样的事情可能吗？

我已经尝试过var、let、const 和window.，但它们没有区别。我还尝试将第一个脚本设为模块，但随后我无法访问 variable1，并且（我认为）无法使用导入/导出。

注意事项：如果没有其他选择，我只想将脚本分成单独的文件。

【问题讨论】：

“如果你不想做某事，就不要做那件事”适用于此。如果您要使用内联脚本（我强烈建议您不要这样做），那么所有代码都具有相同的范围。不管你是否将它分散到多个 <script> 标签上，那是 HTML 的东西，而不是 JS 的东西。但是，您真正想做的不是开始使用现代 JS 并将您的代码放在他们自己的文件中，如 modern ES modules，因此任何需要来自另一个范围的东西的东西都可以直接导入。
如果你确定，你可以回答这个问题，说我必须使用单独的文件

标签： javascript scope

【解决方案1】：

由于variable1 和variable2 定义在同一个范围内（在顶层），因此无法在其他地方只访问一个而不能访问另一个 - 除非您将第一个脚本标记更改为类似

<script>
    var variable1 = 'first variable :)';
    (() => {
        var variable2 = 'second variable :)';
        // do stuff with variable2
    })();
    // variable2 cannot be seen outside
</script>

如果没有其他选择，我只想将脚本分成单独的文件

这是一个非常好的选项，如果您正在制作一些相当专业的东西并且要编写的代码不是微不足道的，那么您应该考虑这个选项。我强烈推荐它，它使编写和维护代码的过程变得非常容易。是的，确实需要一些时间来弄清楚并习惯，但这是值得的，IMO。

【讨论】：

好吧，代码实际上很简单，所以我想我会使用你展示的代码
补充一点，我们使用CSP 已经有一段时间了，很多服务器甚至不允许您再使用带有内联脚本的 HTML，因为这是最不安全的方法加载脚本（有人可以 MITM 你的文件，替换脚本代码，它会被认为非常好）。将您的代码放在自己的文件中，既可以将您的 JS 与您的 HTML 分开（这意味着您的所有工具实际上都可以做正确的事情），并且可以让您以与现代网络兼容的方式保护您的 JS 有效负载。
当然，如果它是微不足道的，那就去吧。

【解决方案2】：

您还可以使用模块脚本并使用窗口对象存储变量：

<script type="module">
  var variable1 = 'first variable :)';
  // not accessible by others scripts
  
  window.variable2 = 'second variable :)';
  // accessible by others scripts
</script>

<script>
  console.log(window.variable2)
  setTimeout(() => console.log(variable2), 10)
</script>

【讨论】：

我测试了它，它不起作用，也许是不同的js版本？
刚刚编辑了代码。好像有延迟工作，我不知道，我一直用它在控制台中调试我的代码
看起来像 window.onload = () => console.log(variable2);足够了，可能是常见的脚本在模块之前运行