JavaScript 预解析（运行机制）

JavaScript 预解析（运行机制）

目录

• 能够知道解析器运行 JS 分为哪两步
• 能够说出变量提示的步骤和运行过程
• 能够说出函数提升的步骤和运行过程

目标

• 预解析
• 变量预解析和函数预解析
• 预解析案例

1. 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

    <script>
      // 1. 我们js引擎运行js 分为两步： 预解析  代码执行
      // (1) 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
      // (2) 代码执行 按照代码书写的顺序从上往下执行
      // 2. 预解析分为  变量预解析(变量提升) 和 函数预解析(函数提升)
      // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提示赋值操作
      // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

      // 问
      console.log(num); // undefined 坑一
      var num = 10;
      // 相当于执行了以下代码
      var num;
      console.log(num); // undefined
      num = 10;

      // 问
      fun();
      var fun = function () {
        console.log(22); // 保错
      };
      // 相当于执行了以下代码
      var fun;
      fun();
      fun = function () {
        console.log(22);
      };
    </script>

案例：结果是几？

    <script>
      var num = 10;
      fun();
      function fun() {
        console.log(num); // undefined
        var num = 20;
      }
      // 相当于执行了以下代码
      var num;
      function fun() {
        var num;
        console.log(num); // undefined
        num = 20;
      }
      num = 10;
      fun();
    </script>

案例：结果是几？

    <script>
      var num = 10;
      function fn() {
        console.log(num); // undefined
        var num = 20;
        console.log(num); // 20
      }
      fn();
      // 相当于执行了以下代码
      var num;
      function fn() {
        var num;
        console.log(num); // undefined
        num = 20;
        console.log(num); // 20
      }
      num = 10;
      fn();
    </script>

案例：结果是几？

    <script>
      var num = 10;
      f1();
      function f1() {
        var b = 9;
        console.log(a);
        console.log(b);
        var a = "123";
      }
      // 相当于执行了以下代码
      var num;
      function f1() {
        var b;
        var a;
        b = 9;
        console.log(a); // undefined
        console.log(b); // 9
        a = "123";
      }
      f1();
    </script>

案例：结果是几？

    <script>
      f1();
      console.log(c);
      console.log(b);
      console.log(a);
      function f1() {
        var a = b = c = 9;
        // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值 没有var声明 当全局变量看
        console.log(a);
        console.log(b);
        console.log(c);
      }
      // 相当于执行了以下代码
      var b;
      b = 9;
      var c;
      c = 9;
      function f1() {
        var a;
        a = 9;
        console.log(a); // 9
        console.log(b); // 9
        console.log(c); // 9
      }
      f1();
      console.log(c); // 9
      console.log(b); // 9
      console.log(a); // 保错
    </script>