【Javascript中的预解析】

一、预解析是什么？

预解析：就是提前解析代码

JS代码的执行是由浏览器中的JS解析器（可以理解为浏览器）来执行的。JS解析器执行JS代码的时候，分为两个过程：预解析过程和代码执行过程。

预解析就是：在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。

二、var预解析

//关于变量的预解析
// 没有声明变量，直接输出会报错
console.log(num);

var num;
// 声明变量，没有赋值，此时这个变量的值为undefined
console.log(num);

// 声明并数值num，在输出num的下方
// 正常情况下应该报错，但是此时结果为undefined
console.log(num);
var num = 10;
// 所以我们认为它被浏览器读取的顺序应该是这样的
var num;
console.log(num);
num = 10;
// 浏览器把num的声明提前了，但是赋值没有被提前

var声明的变量在预解析的时候只是提前的声明

☀️举个例子:

  /*先解析var变量num
		  然后执行console输出
		  最后把10赋给num
       */
		console.log("num=",num);
		var num = 10; 

❤️输出结果：

三、function函数预解析

//关于函数的预解析
// 正常情况下函数是先声明在调用，没有声明的调用会报错
f1(); //函数的调用
function f1() {
    console.log("函数的声明");
}
// 此时运行代码后，正常输出

// 说明此时浏览器将函数的声明提前了，运行顺序如下
function f1() {
    console.log("函数的声明");
}
f1(); //函数的调用

function声明的函数在预解析的时候会提前声明并且会同时定义

☀️举个例子:

   /*
		   先解析fn函数的定义
		   然后执行console语句
		*/
		console.log("1+2+3+...+100=",fn());

		function fn(){
			var s = 0;
			for(var i=1;i<=100;i++){
				s += i;
			}
			return s;
		}

❤️输出结果：

四、var声明的变量和function声明的函数在预解析的区别

总结：var声明的变量和function声明的函数在预解析的时候有区别，var声明的变量在预解析的时候只是提前的声明，function声明的函数在预解析的时候会提前声明并且会同时定义。也就是说var声明的变量和function声明的函数的区别是在声明的同时有没有同时进行定义。

五、拓展

1. 预解析做了什么事？

把变量的声明提前了，不提前赋值——提前到当前所在作用域的最上面
把函数的声明提前了，不提前调用——提前到当前所在作用域的最上面
☀️举个例子：

例如：你能算出num的输出结果为什么吗？
f1();//函数的调用
var num = 20;
function f1() {
    console.log(num);
}

❤️输出结果：

详细图解如下：

2.预解析分段问题的局部作用域的问题

预解析在变量的提升中，只会在当前的作用域中提升，提前到当前的作用域的最上面；函数中的变量只会提前到函数的作用域中的最前面，不会出去。
☀️举个例子：

function f1() {
    console.log(num);
    var num = 10;
}
f1();
console.log(num);

❤️输出结果：

详细图解如下：