为什么 body 中的 javascript 函数优先于 head 中的函数？

Question

我想了解 javascript 中的执行顺序。为什么 body 中的 foo 优先于 head 中的 foo 。先编译的不是head中的foo吗？

<head>
  <meta charset="UTF-8">
  <title>Hello</title>

  <script type="text/javascript">
    function foo() {
      greeting = "hello from the head";
      alert(greeting);
    }
  </script>
</head>

<body>
  <div id="clickMe" onclick="foo()">Click me</div>
  <script>
    function foo() {
      greeting = "hello from the body";
      alert(greeting);
    }
  </script>
</body>

</html>

Answer 1

以后的函数声明会覆盖旧的函数声明。在声明新函数之前仍然可以调用旧函数:

<script type="text/javascript">
  function foo() {
    greeting = "hello from the head";
    alert(greeting);
  }
  foo();
</script>
<div id="clickMe" onclick="foo()">Click me</div>
<script>
  function foo() {
    greeting = "hello from the body";
    alert(greeting);
  }
</script>

但是一旦下面的脚本标签运行，函数名就会被重新分配。如果你这样看它可能更有意义，每个函数重新分配 window.foo:

<script type="text/javascript">
  window.foo = function foo() {
    greeting = "hello from the head";
    alert(greeting);
  }
</script>
<div id="clickMe" onclick="window.foo()">Click me</div>
<script>
  window.foo = function foo() {
    greeting = "hello from the body";
    alert(greeting);
  }
</script>

Answer 2

这是调用阴影。

JS 编译器提升脚本中的函数。后面的会覆盖前面遇到的同名。

function foo() {
   console.log('Foo early');
}

function foo() {
   console.log('Foo late');
}

foo();    //Foo leate

Answer 3

这与声明同一个函数两次没什么不同

function foo() {
  console.log("first");
}

function foo() {
  console.log("second");
}

foo();  // prints "second"

这在某种程度上与此没有什么不同

let bar;
bar = 1;
bar = 2;

bar 现在是 2。

您可以使用不同的语法来避免这种情况

const foo = () => {
  console.log("first");
};

const foo = () => {
  console.log("second");
};

在这种情况下你会得到一个错误

Uncaught SyntaxError: Identifier 'foo' has already been declared

并且似乎甚至可以跨脚本工作

<script>
const foo = () => {
  console.log("first");
};
</script>
<script>
const foo = () => {
  console.log("second");
};
</script>

Answer 4

基本上只是因为body中的那个是它读取的最后一个函数，所以它就坚持了。

记住 HTML 文档是从上到下阅读的，所以如果您有两个相同函数的实例，它实际上会保留最接近文档末尾的那个

为什么 body 中的 javascript 函数优先于 head 中的函数？

Why javascript function in the body takes precedence over function in the head?

javascript

function

execution