彻底弄清JS预解析

什么预解析？

简单地说就是浏览器在执行js代码的时候分成两步操作，先解析后执行。也就是说浏览器不会说直接执行我们的js代码，而是经过简单加工处理再执行我们的代码，而这个加工处理的过程我们叫做预解析。

1. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作
(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面不调用函数。

2.预解析规则：
1.将变量声明和函数声明提升到当前作用域的最前面。
2.将后面的代码按照顺序依次放到后面。

注意！！！！（掌握）
通过let声明的变量（函数）不会被预解析

案例

在这里插入代码片	var num = 123;
        fun()
        function fun(){
            console.log(num)
            var num = 666;
         }
        // 预解析过程
        var num = 123;
        第一步：函数提升
        function fun(){
        第二步：变量提升到当前作用域的最前面，再依次执行下面的代码
            var num;
            console.log(num)
            num = 666;
        }
        fun()//输出undefined

注意！！！！（了解，面试中可能会出现）
1.在高级浏览器中不会对{}里面的函数进行函数提升
2.只有在低级版本的浏览器中才会按照正常的方式进行函数解析

 if (true) {
            function fun(){
                console.log(111111111111111111)
            }
        } else {
            function fun(){
                console.log(2222222222222222222)
            }
        }
        fun()
        //true 111111111111111111
        //false 222222222222222
 //在低版本的浏览器中对此进行解析
  function fun(){
                console.log(111111111111111111)
            }
   function fun(){
                console.log(2222222222222222222)
            }
   if(){}else{}
   //无论true还是false都会输出2222222222222222

注意！！！！（了解，面试中可能会出现）
如果函数名和变量名相同，那么函数提升的优先级高于变量

 console.log(value)
        var value=123;
        function value(){
        console.log("fun value")
        }
        console.log(value)
        // 解析过程
 function value(){
        console.log("fun value")
        }
        console.log(value)
        var value;
        value=123;
        console.log(value)

例子3预解析后，不太对，求解

// fn();
// function fn() {console.log(1)};
// fn();
// var fn = 10;
// fn();
// function fn() {console.log(2)};
// fn();
输出2 ，2，fn is not a function
//预解析后，不太对，求解
function fn() {console.log(1)};
function fn() {console.log(2)};  
var fn = 10
fn()
fn();
fn();
fn();