第 12 期(2019-05-19)：同名函数的执行 #14

wingmeng · 2019-05-19T12:12:38Z

类型：基础知识
难度：★

有以下 html 文件，请问运行后浏览器控制台输出结果是什么？为什么？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script>
    function fn() {
      console.log(1);
    }
    fn();

    function fn() {
      console.log(2);
    }
    fn();
  </script>
  <script>
    function fn() {
      console.log(3);
    }
    fn();
  </script>
</body>
</html>

参考答案：

控制台依次输出：2, 2, 3

原因：JavaScript 解释器在执行页面脚本时，是按块执行的。具体来讲，就是当浏览器在解析 HTML 文档时，如果遇到一个 script 标签，则 JavaScript 解释器会等到这个代码块都加载完成后（读取到当前代码块的 </script> 标签），先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的 HTML 文档，同时JavaScript 解释器也准备好处理下一个代码块……

上面代码的执行步骤：

读入第一个代码块（代码块指 <script></script> 中的代码，下同）；
做语法分析，如有语法错误，则报错并停止当前代码块里后续代码的执行，跳到第 5 步；
对代码块内的所有变量和函数做预编译处理（这里有 2 个重名的 fn 函数，后面一个会覆盖前面一个函数的定义）；
执行代码（这段代码里调用了 2 次 fn()，故依次输出 2，2）；
读入第二个代码块；
重复 2 ~ 4，输出 3

题外话：如果 script 标签带有 defer、async 属性，情况有所不同。

相关资料：https://www.jianshu.com/p/bda5266755a2

本期优秀回答者： @AMY-Y

The text was updated successfully, but these errors were encountered:

AMY-Y · 2019-05-19T14:46:45Z

/*2 2 3
*原因：
*第一个script标签内：
*    函数声明   方式创建的函数，会存在函数声明提前，代码等同于
*/
    function fn() {
      console.log(1);
    }
    function fn() {
      console.log(2);
    }//相同函数名，在html内部，按顺序查找函数名，后面的会覆盖前面的
    fn();  //2
    fn(); //2
//最下面的没找到参考文章。自己猜测原因：还是HTML内部js按顺序查找函数名，后面的会覆盖前面的

参考文章：
https://www.cnblogs.com/echolun/p/7612142.html
https://www.cnblogs.com/wshiqtb/p/3480597.html

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第 12 期(2019-05-19)：同名函数的执行 #14

第 12 期(2019-05-19)：同名函数的执行 #14

wingmeng commented May 19, 2019 •

edited

Loading

AMY-Y commented May 19, 2019

第 12 期(2019-05-19)：同名函数的执行 #14

第 12 期(2019-05-19)：同名函数的执行 #14

Comments

wingmeng commented May 19, 2019 • edited Loading

AMY-Y commented May 19, 2019

wingmeng commented May 19, 2019 •

edited

Loading