Question

我不明白为什么下面的代码块在单击按钮时的工作方式不同。它们都包含两个警告不同消息的函数，不同之处在于第二个示例中有单独的＆lt; script＆gt; 块。

＆＃xA;＆＃xA;

In第一个例子，两个按钮都警告 Hello too !!! ，但在第二个例子中，它们会提醒每个函数的各个消息。

＆＃xA;＆＃xA;

第一个代码：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt;！DOCTYPE html＆gt;＆＃xD;＆＃xA;＆lt; html lang =“en”＆gt;＆＃xD;＆＃xA;＆lt; head＆gt;＆＃xD;＆＃xA; ＆lt; meta charset =“UTF-8”＆gt;＆＃xD;＆＃xA; ＆LT;标题＆GT;名称＆LT; /标题＆GT;＆＃的xD;＆＃XA;＆LT; /头＆GT;＆＃的xD;＆＃XA;＆LT;主体＆GT;＆＃的xD;＆＃XA; ＆lt; button id =“red”＆gt; Hello！＆lt; / button＆gt;＆＃xD;＆＃xA; ＆lt; button id =“green”＆gt; HelloTooo＆lt; / button＆gt;＆＃xD;＆＃xA; ＆LT;脚本＆GT;＆＃的xD;＆＃XA; function func（）{＆＃xD;＆＃xA;警报（ '你好！'）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; document.getElementById（“red”）。onclick = func;＆＃xD;＆＃xA;＆＃xD;＆＃xA; function func（）{＆＃xD;＆＃xA;警报（'你好!!!'）;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; document.getElementById（“green”）。onclick = func;＆＃xD;＆＃xA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA;＆LT; / BODY＆GT;＆＃的xD;＆＃XA;＆LT; / HTML＆GT;

＆＃的xD;＆＃XA;

＆＃xD;＆＃xA;

＆＃xD;＆＃xA; 
＆＃xA;＆＃xA; 第二个代码：
＆＃xA;＆＃ xA;  
＆＃xD;＆＃xA; < div class =“snippet-code”>＆＃xD;＆＃xA;  ＆lt;！DOCTYPE html＆gt;＆＃xD;＆＃ xA;＆lt; html lang =“en”＆gt;＆＃xD;＆＃xA;＆lt; head＆gt;＆＃xD;＆＃xA; ＆lt; meta charset =“UTF-8”＆gt;＆＃xD;＆＃xA; ＆LT;标题＆GT;名称＆LT; /标题＆GT;＆＃的xD;＆＃XA;＆LT; /头＆GT;＆＃的xD;＆＃XA;＆LT;主体＆GT;＆＃的xD;＆＃XA; ＆lt; button id =“red”＆gt; Hello！＆lt; / button＆gt;＆＃xD;＆＃xA; ＆lt; button id =“green”＆gt; HelloTooo＆lt; / button＆gt;＆＃xD;＆＃xA; ＆LT;脚本＆GT;＆＃的xD;＆＃XA; function func（）{＆＃xD;＆＃xA;警报（ '你好！'）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; document.getElementById（“red”）。onclick = func;＆＃xD;＆＃xA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA; ＆LT;脚本＆GT;＆＃的xD;＆＃XA; function func（）{＆＃xD;＆＃xA;警报（'你好!!!'）;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; document.getElementById（“green”）。onclick = func;＆＃xD;＆＃xA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA;＆LT; / BODY＆GT;＆＃的xD;＆＃XA;＆LT; / HTML＆GT;  
＆＃的xD;＆＃XA; 
＆＃xD;＆＃xA;

Answer 1

那是因为函数声明被提升到封闭函数的顶部，或者在这种情况下是脚本。这允许您在声明之前调用函数

func();
function func() {
  console.log('This works!');
}

然后，您的第一个示例变为类似

<script>
  /* Function declarations are hoisted to the top */
  function func() {
    console.log('hello!');
  }
  function func() {
    console.log('Hello too!!!');
  }
  /* func is the 2nd one for both calls */
  func();
  func();
</script>

但是，如果使用不同的脚本，则第一个脚本将在运行第二个脚本之前完全运行。所以第二个函数声明不会影响第一个。

<script>
  /* Function declarations are hoisted to the top */
  function func() {
    console.log('hello!');
  }
  func();
</script>
<script>
  /* Function declarations are hoisted to the top */
  function func() {
    console.log('Hello too!!!');
  }
  func();
</script>

请注意，如果您刚引用func而不是存储其值，则会有所不同，因为第二个脚本将有效地更改全局func变量。

<script>
  /* Function declarations are hoisted to the top */
  function func() {
    console.log('hello!');
  }
  setTimeout(function(){
    func(); /* By the time this is called, it will have been altered
               by the 2nd script */
  }, 1e3);
</script>
<script>
  /* Function declarations are hoisted to the top */
  function func() {
    console.log('Hello too!!!');
  }
  setTimeout(function(){
    func();
  }, 1e3);
</script>

为什么<script>元素的数量会影响全局定义的函数？

1 个答案: