JavaScript 预解析

JavaScript 预解析你知道吗？

---

1、JavaScript代码的执行

​ 我们知道我们编写的HTML、CSS、JavaScript代码运行的时候会交由浏览器的两个引擎（渲染引擎和JavaScript引擎）去解析和执行。那么当JS引擎对我们的JavaScript代码进行解析处理的时候，它会通过（预解析和代码执行）这两个步骤完成对JS代码的解析和运行任务。

2、究竟什么是预解析

​ 在当前变量或者函数等的作用域下，JavaScript代码在执行之前，浏览器会默认将JavaScript代码中有关"var" 与 "function"关键字声明的变量与函数在内存中提前声明以及提前定义。

​ 简单点来说就是：JS代码在执行之前，会在相应的执行环境（JS引擎）中，提前将一些东西（var声明的变量和function声明的函数）解析到内存中。

3、变量的预解析

演示：

<script>
	console.log(num);
	var num = 10;
</script>

执行流程：

1. 首先我们知道代码是由上往下执行的，那么JS引擎发现第一行代码在输出num变量，而在它之前并没有声明和定义变量，所以JS引擎默认预加载给num变量声明，但没有赋值，即var num;
2. 接下来就是控制台输出，发现它之前预解析了num，但是没有赋值，也就undefined（未定义），那么它输出也就是undefined。
3. 接下来又定义了一个变量，这个之前在预解析的时候也解析了，但它们两个不是同一个num，它解析以后代码执行到它，它赋值了，所以这里的num就是10。

总结：

​ 从上述案例我们可以看出，我们的JS代码在执行之前都要预解析变量（声明而不赋值），也就是undefined，所以会输出undefined，所以与它后边的变量定义与赋值没有关系可言。并且预解析的时候这两个变量也没有挂钩，只是说名字一样而已。

​ 那么也就是说，JS代码会将所有的变量声明（预解析）提前到当前作用域的最前面，而不会将赋值操作也一并提前。

4、函数的预解析

​ 演示：

​ 为什么我们的自定义函数可以将调用代码放在之前后者之后都可以，而匿名函数却只能放在之后？

 		   fun();
            function fun(){
                 console.log(1);
            }

解释：

1. 首先预JS引擎先找到带有function关键字声明的函数，并将其预解析（声明和定义），也就是说自定义函数在解析的时候会将函数签名以及函数体解析到了内存中，所以函数的声明和定义是同时进行的，那么也就是代表在前后调用都可以执行。
2. 而匿名函数没有名称，前面的var关键字，所以预加载的时候只是声明的var，而并没有定义（赋值），所以匿名函数不可以将调用放在函数定义之前。

5、变量与函数预解析的区别

​ var关键字声明的变量和function声明的函数在预解析的时候是有区别的。var关键字声明的变量在预解析的时候只是提前声明了，而function关键字声明的函数在预解析的时候会提前声明并同时定义。也就是说变量和函数预解析最大的区别就在于函数只是提前了声明，而函数声明和定义是同时提前预解析的。