JS预编译

JS三部曲：
语法分析：
js代码的执行是读一行代码执行一行，但在执行之前系统会先对js进行全面扫描检查是否存在低级的语法错误，并不会立即执行语句。
预编译：

1.函数声明整体提升

例如我们写一个函数，我们先执行test();然后再写函数体查看它是否能执行：

test();
function test(){
var num=1;
console.log(num);
}

执行结果：

image.png

结果显示先执行函数后写函数体，函数也能够执行，这是因为js的预编译将函数体放在了js的最前头，也就是将函数声明整体优先提升，变成下面的代码顺序

function test(){
var num=1;
console.log(num);
}
test();

2.变量声明提升

例如我们声明一个变量，但是我们把输出这个变量的命令写在声明的前面

console.log(a);
var a=1;

image.png

这里显示的是undefined，而不是1，这是因为js预编译将变量的声明提升到了js最前面而不是将它的变量的值提升，也就是将var a提升，而a=1还是在它原来的位置，所以也就是说只是声明了a并没有赋值，从而变成下面的一段代码

var a;
console.log(a);
a=1;

3.解释执行

对代码进行解释执行。
在执行代码之前js会先进行一个预编译，
1.js会创建一个AO对象。
2.找形参和变量声明，将变量和形参名作为AO对象的属性名，并给它们付一个初始值undefine。
3.将实参值和形参统一。
4.在函数体里面找函数声明，值赋予函数体。

直接看例子

function fn(a){
    console.log(a);
    var a=123;
    console.log(a);
    function a(){};
    console.log(a);
    var b=function (){}
    console.log(b);
    function d(){};
}
fn(1);

结果输出：

image.png

我们一步步来推算
1.系统自动创建对象AO={}；
2.找形参和变量声明，将变量和形参名作为AO对象的属性名，并给它们付一个初始值undefine。
形参：a
变量声明：a和b //形参里有a了但是变量声明也有a这时只写一个a就行
找到之后将这a和b当作AO对象的属性名写进去并且赋值为undefined，

AO={
a:undefined
b:undefined
}

3.将实参值和形参统一，也就是将实参的值赋给形参

AO={
a:1
b:undefined
}

4.在函数体里面找函数声明，值赋予函数体。

AO={
a:function a(){}
b:function (){}
d:function (){}
}

所以结果输出

image.png

预编译提前帮我们整理了js的执行顺序
根据函数声明整体提升，变量声明提升这两句就可以得到

function fn(a){
    var a;
    var b
    function a(){};
    function d(){};
    console.log(a);
    a=123;
    console.log(a);
    console.log(a);
    b=function (){}
    console.log(b);
}
fn(1);

这样看就更加显而易见。