下层基础决定上层建筑1-js预编译

在 JavaScript 中，预编译是指在函数执行之前，对函数内部的变量和函数声明进行处理的过程。这个过程会将函数内部的变量和函数声明提升到函数的顶部，并将它们初始化为默认值。

声名提升

1.变量声明，声明提升

2.函数声明，整体提升

    //声明提升前
    console.log(a)
    var a = 1
    foo()
    function foo(){
    console.log(1)
    }

    //声明提升后
    var a；
    function foo(){
    console(1)
    }
    console.log(a) //会打印出undefined
    var a = 1
    foo()

函数中的预编译的步骤

1.创建函数的执行上下文对象，AO ｛Activation Object｝

2.找形参和变量声明，将形参和变量名作为 AO属性，值为undefind

3.将实参和形参统一

4.在函数体内找函数声明，将函数名作为AO属性名，值赋予函数体

function fu(a){
console.log(a)
var a = 123
console.log(a)
function a(){} //函数声明
console.log(a)
var b= function(){} //函数表达式
console.log(b)
function d(){}  //函数声明
var d = a
console.log(d)
}

 fu(1)

// 1.创建函数的执行上下文对象，AO ｛Activation Object｝
// AO{
// }


//2.找形参和变量声明，将形参和变量名作为 AO属性，值为undefind
// AO{
     a = undefind
     b = undefind
     d = undefind
// }

//3.将实参和形参统一
// AO{
    a = 1
    b = undefind
    d = undefind
// }

//4.在函数体内找函数声明，将函数名作为AO属性名，值赋予函数体
// AO{
     a = function a(){}
     b = undefind
     d = function d(){}
// }

运行结果

详细解析

编译后

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

开始执行

    console.log(a)//打印function a(){}
    var a = 123  // a赋值为123
    console.log(a) //打印a为123
    function a(){} //函数，未调用不执行
    console.log(a) //a未变值仍为123
    var b= function(){} //将变量b赋值为function b(){}
    console.log(b)  //打印b，为function b(){}
    function d(){} //函数，未调用不执行
    var d =a //d = a = 123
    console.log(d) //打印d为123
    
    

全局的预编译

1.创建全局执行上下文对象 GO

2.找变量声明，变量名作为Go的属性名，值为undefind

3.在全局找函数声明，函数名为GO属性名，值为函数体

global = 100
function fn(){
    console.log(global);
    global = 200
    console.log(global);
    var global = 300;
}
fn();
var global ;

//1.创建全局执行上下文对象 GO
GO{
}

//2.找变量声明，变量名作为Go的属性名，值为undefind
GO{
   global = undefind
}

//3.在全局找函数声明，函数名为GO属性名，值为函数体
GO{
   global = undefind
   fu = function fn(){}
}

运行结果

详细解析

编译后

GO{
   global = undefind
   fu = function fn(){}
}

开始执行

global = 100 //global赋值为100
function fn(){
    console.log(global);
    global = 200
    console.log(global);
    var global = 300;
}
fn();//编译fu并调用fu
var global ;//声明提升，开头解释过


//AO｛
//global = undefind
//｝

function fn(){
    console.log(global);//AO中，global为undefind
    global = 200 //global赋值为200
    console.log(global); //打印为200
    var global = 300; //
}