最详细的JS的预解析

1. 什么是预解析
   就是js代码的执行过程，在所有js代码执行之前，对整篇js代码进行通读并解释（浏览器在解析）
2. 解析了什么内容
   只有两种内容，var声明的变量var num,和声明式函数（不是赋值式函数）function fn(){}
3. 怎么解析的

   1. var 声明的变量
      在所有 js 代码执行之前, 先把变量声明好
      再开始执行代码

   2. 声明式函数
      在所有 js 代码执行之前, 先把函数名声明好, 并且给这个函数名赋值为一个函数
      再开始执行代码

fn()
    function fn() {
      console.log('我是 fn 函数')
    }

    /*
      代码的执行
        fn()
        function fn() {
          console.log('我是 fn 函数')
        }

      1. 预解析
        告诉浏览器 fn 这个名字被声明过可以使用
        并且 fn 还是一个函数 function fn() { console.log('我是 fn 函数') }

      2. 执行代码
        fn()
    */

1. 对于赋值式函数的预解析
   赋值式函数不会按照声明式函数的预解析进行，而是按照var 的预解析规则进行var fn=function(){}

fn() // fn is not a function
    var fn = function () {
      console.log('我是 fn 函数')
    }

分析代码执行过程

分析代码执行过程
fn()
var fn = function () {}

1. 进行预解析
   var fn
   就告诉浏览器这个 fn 被声名过了, 但是并没有给他赋值为一个函数

2. 代码开始执行
   fn() // 这行代码执行的时候, fn 还是一个没被赋值的状态, 是个 undefined

预解析的优先级

• 当定义一个变量和一个声明式函数时，如果变量名和函数名重名，在预解析的时候，以函数为准，请参考下面的例子

console.log(num) // 打印 num 这个变量的值
    num(100) // 调用 num 函数, 传递一个 100 作为实参
    var num = 100
    console.log(num)
    num(200) // 报错, 因为到这里 num 已经不是函数了, 是 100 这个数值
    function num(a) {
      console.log(a) // 打印 a 形参, 接收的是 num() 的时候传递进来的实参
      console.log('我是一个函数')
    }
    console.log(num)
    /*
      解析代码执行过程
      console.log(num)
      var num = 100
      console.log(num)
      function num() {
        console.log('我是一个函数')
      }
      console.log(num)

      1. 预解析
        告诉浏览器 num 这个变量可以使用
        告诉浏览器 num 这个变量可以使用, 并且赋值为一个函数
        当预解析结束的时候
        num 就是一个函数

      2. 真正的代码开始执行
        console.log(num) // 此时因为刚刚预解析结束, 所以 num 就是一个函数
        num = 100        // 给 num 从新赋值, 赋值为 100, 那么就不在是一个函数了
        console.log(num) // 因为已经给 num 从新赋值完毕了,  打印出来 100
        console.log(num) // 因为已经给 num 从新赋值完毕了,  打印出来 100
    */

最后注意NOTE
预解析的无节操

1. 不管 if 条件是不是成立, 写在 {} 里面的代码都会进行预解析
   只是条件不成立的时候, 不会执行 {} 里面的赋值操作

2. 当再函数内部的时候, return 后面的代码虽然不会执行
   但是会进行预解析