JS学习笔记之JS预解析

JS预解析学习笔记

最近在学习JavaScript的预解析内容将笔记分享给大家

---

前言

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

(1).预解析:JS引擎会把JS里面所有的 var关键字 还有function函数提升到当前作用域的最前面
(2).代码执行:按照代码书写顺序从上往下执行

---

一、预解析？

预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)

(1).变量提升:就是把所有的变量声明提升到当前作用域的最前面 不提升赋值操作
(2).函数提升:就是把所有的函数声明提升到当前作用域的最前面 不调用函数

二、案例:

案例1

（1）初始代码如下：

var num = 10;
        fun1();

        function fun1() {
     
            console.log(num);
            var num = 20;
        }

（2）运行时的代码：

// 变量函数都提升
        var num;

        function fun1() {
     
            var num;
            // 就近原则上面只有num,依次罗列所以这是undefined
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();

（3）运行结果如下：


（4）分析：
   我们知道JavaScript解析器在运行JavaScript代码的时候，JS引擎会把JS里面所有的 var关键字 还有function函数提升到当前作用域的最前面这里又有var关键字又有function函数所以首先将变量提升到前面(注意提升是不赋值的)，然后再将函数提升到前面(注意提升是不调用的)，函数里面也有var关键字所以需要提升到前面，再照着原来的代码顺序num = 10，fun()这样写下来就是上面运行时的代码。

案例2

（1）初始代码如下：

getnum();
console.log(y);
        console.log(z);
        console.log(x);

        function getnum() {
     
            var x = y = z = 6;
            console.log(x);
            console.log(y);
            console.log(z);
        }

（2）相当于以下代码：

//函数提升
function getnum() {
     
            // var x = y = z = 6;
            // 这里的变量声明相当于var x = 6; y=6; z=6; y和z是全局变量所以变量提升是将x提升就好
            //变量提升
            var x = 6;
            x = y = z = 6;
            console.log(x);
            console.log(y);
            console.log(z);
        }
        getnum();
        // 如果将控制台x写在第一行,就只会显示3行6然后1行报错影响下面y和z的继续输出，由于x是函数里的局部变量就会报错显示未定义(x is not defined)
        // 写在最后一行前面的y和z就可以输出不会被影响
        console.log(y);
        console.log(z);
        console.log(x);

（3）运行结果如下：

（4）分析：
   JS运行代码的时候首先在整个代码的主体部分找var关键字发现没有，然后发现有getnum()函数于是将其提升到前面，其他的代码按照顺序来依次执行，而getnum()函数里面也有一个var关键字局部变量的提升就是x变量，y和z是全局变量没关键字定义不会提升上去，然而由于x是局部变量也就使得接下来在函数外部控制台输出x的时候会显示未定义。

---

总结

以上就是今天要跟大家分享的JS预解析的内容写得不好还请多多包涵。