JS在页面加载过程中顺序执行。但是分块预编译、执行。
JS在执行前会进行类似”预编译”的操作，而且先预声明变量再预定义函数。
此时注意，是声明，不是定义，如：var a = 1; 在预编译中，只是执行了”var a”没有赋值，即在预编译结束时a 为undefined。
（注意）并不是先全文编译完在执行，而是块编译，即一个script块中，预编译再执行，然后（按顺序）下一个script块，预编译再执行，但此时上一个块中的数据都是可以用的，但下一个块中的函数，声明的变量都是不可用的。
变量没声明就引用，会报错，但对象方法，对象变量没声明，是undefined
在函数中变量不声明就赋值，会被认为是全局变量，用var声明后为函数变量
在执行函数时时也是先编译后执行，但要注意函数定义中（即大括号中）的代码即使有错只要函数不执行，就不会有影响，但一执行函数，开始函数预编译就会出错。
先说下预编译，
例如
function arr(){
function sum(){
var bit = 53;
console.log(sun);
在sum函数里面没有sun，就在下面找，后台输出为36
}
console.log(sun);
sun的值在上面没有，但也不能往下找，只能是undefined
var sun = 36;
sum();
console.log(sun);
sun的值在上面找，顺着下来，就是36
console.log(z);
z的值在自己的函数里面没有，可在全局区找，正好有z的赋值了，所以是123
}
var z = 123;
arr();
在预编译的时候，AO是在函数运行的前一刻执行的，在执行的时候，首先它会想声明提前，但赋值留在原地，然后将函数部分也提到前面，再从上往下运行，如果在函数里面找不到值，它会在全局里面去找值，再然后进行输出。
总结分为四步
第一步，创建AO（activation object/执行期上下文)对象
第二部，找形参和变量声明，将变量和形参作为AO的属性名，值为undefined
第三步，将实参值和形参统一
第四步，在函数中找函数声明，值赋予函数体
来源：CSDN
作者：wenxin_liu
链接：https://blog.csdn.net/wenxin_liu/article/details/103642697