Question

我在鳕鱼下面使用它，它按预期工作：

<script>
  function_two();
  function function_two() {
    alert("The function called 'function_two' has been called.");
  }
</script>

但是当我申请下面的代码时，它并没有按预期工作：

<script>
  function_two();
</script>

<script>
  function function_two() {
    alert("The function called 'function_two' has been called.");
  }
</script>

有人能说出原因吗？

Answer 1

这是因为function declaration hoisting。 function声明已提升到脚本顶部。在第一种情况下，实际发生的是：

<script>
  function function_two() {
      alert("The function called 'function_two' has been called.");
  }

  function_two();
</script>

function声明已在<{1}}电话上方悬挂。

在第二种情况下，function_two()包含在不同的function_two()元素中，并且script声明无法在其上方悬挂 - 在这种情况下，代码保持相同的顺序，并且function在被调用时最终不存在。

Answer 2

由于javascript的提升，声明总是在执行之前被推到范围的顶部（你不能看到，js自己这样做）。这就是为什么你可以在宣布它之前使用第一个例子中的函数的原因。

在第二个示例中，您使用单独的脚本元素进行函数声明和使用。这是不可能的，因为在浏览器开始编译第二个脚本元素之前，第一个脚本元素被编译并执行。

为什么我可以在同一个脚本块中调用稍后声明的函数，而不是在以后的脚本块中声明的函数？

2 个答案: