跨脚本标签提升变量声明？答案

【问题标题】：Hoisting variable declarations across script tags?跨脚本标签提升变量声明？
【发布时间】：2018-02-17 06:39:17
【问题描述】：

我在 html 文件中插入了以下代码：

<script>
	console.log(myVar);
	var myVar = 1;
</script>

在浏览器中打开此 html 页面后，myVar 的值将未定义。据我了解，这是 javascript 中的正常行为，因为它首先设置内存空间，然后执行代码。

现在奇怪的部分是，如果我们这样拆分同一个 html 页面：

<script>
	console.log(myVar);
</script>

<script>
	var myVar = 1;
</script>

结果将是：Uncaught ReferenceError: myVar is not defined

为什么？

这与变量的范围无关，它与提升有关，似乎提升仅在 javascript 块内，不适用于其他 javascript 块中的整个加载页面。这里也是同样的例子：

<script>
	myFunc();

  function myFunc() {
		console.log('Hello!');
	}
</script>

VS

<script>
	myFunc();
</script>


<script>
	function myFunc() {
		console.log('Hello!');
	}
</script>

【问题讨论】：

第二点的参考资料我没有很好的答案，所以我会推迟到其他人。关于第一点：那是由于“提升”。

标签： javascript

【解决方案1】：

在上面的代码中，<script> 和console.log(myVar) 首先被渲染，系统在全局和局部范围内寻找myVar 变量。由于在此之前未找到该变量，因此 Uncaught ReferenceError: myVar is not defined 错误，因为 var myVar = 1; 在下一个 <script> 块中呈现。

<script>
  console.log(myVar);
</script>

<script>
  var myVar = 1;
</script>

但是当您将 <script> 块的顺序更改为如下所示时，它将起作用

<script>
  var myVar = 1;
</script>

<script>
   console.log(myVar);
</script>

【讨论】：

【解决方案2】：

为什么？因为第一个脚本运行时不考虑第二个脚本。您描述的行为，在执行代码之前首先声明所有变量，仅适用于每个单独的代码块。

【讨论】：

嗨，Bergi。我明白你的回答。这也是我的直觉，但我想知道为什么。 Javascript 每天都不会停止让我吃惊:) 谢谢。
它还能如何工作？考虑外部加载的脚本，它更明显：脚本在加载时运行，而不是在将来的某个时间运行。我不会等到页面中的所有其他脚本也都加载完毕。当我们考虑由其他脚本动态加载的脚本时，这显然是必要的。
好吧，我认为无论运行多少脚本，整个加载页面都可以使用提升。但似乎只能在 javascript 块内进行提升。

【解决方案3】：

MyVar 现在定义在第二个示例的范围内（即使它可能在示例 1 中）。在最后的代码块中，声明了 myVar。我强烈建议阅读 JavaScript（和 Java）中的变量范围

【讨论】：