前端笔记-js预编译

80 阅读2分钟

前言:

1.函数声明整体提升
2.变量 声明提升
1.函数声明整体提升:
a();
function a(){}
//会将function a(){} 提升到最上面,再执行a()
//可以将上面的代码执行顺序理解为:
function a(){}
a();
2.变量   声明提升 :
console.log(a);
var a = 123;   //这里意思是 声明了变量a,并且给a赋值了123
//会将 (a的声明)提升到最上面
//可以将上面的代码执行顺序理解为:
var a;         //声明变量a
console.log(a); 
a = 123;       //给变量a赋值123

四部曲:

1. 创建AO对象
2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3. 将实参值和形参值统一
4. 在函数体里面找函数声明,值赋予函数体

例子:

代码:
function fn(a){
    console.log("第一个a:"+a)
    var a = 123;
    console.log("第二个a:"+a)
    function a(){}
    console.log("第三个a:"+a)
    var b = function(){}
    console.log(b)
    function d(){}
    console.log(d)
}
fn(1);
//预编译发生在函数执行的前一刻

思路:
1.创建AO对象:
    AO{    
    }
2.找形参和变量声明
    function fn(a)       :这里的a是形参-------------------------得到a
    var a = 123;         :这里的a是变量声明----------------------得到a
    var b = function(){} :这里的b是变量声明,只不过是声明了一个函数-- 得到b
3.将变量和形参名作为AO属性名,值为undefined
	因为有两个a,所有只写一个
	AO{
        a:undefined,
        b:undefined
    }
4.将实参值和形参值统一(意思是将实参的值传到形参里面)
    fn(1)   		:这里的1是实参
    function fn(a)  :这里的a是形参
    AO{
        a:1,
        b:undefined
    }
5.在函数体里面找函数声明,值赋予函数体
    function a(){} 和 function d(){} 是函数声明
    则预编译最后的结果为:
    AO{
        a:function a(){},
        b:undefined ,
        d:function d(){}
    }
6.开始执行函数
    console.log("第一个a:"+a)   :这里的a就是现在AO里面a的值,则输出-->第一个a:function a(){}
    var a = 123;               :这里的var 声明其实已经不存在,《变量声明提升》已经将a提前声明了;这里的只是将123赋值给了a,则a的值为123
    console.log("第二个a:"+a)   :这里输出-->第二个a:123
    function a(){}			   :这里的a函数声明也已经提升了,所以这里不用管
    console.log("第三个a:"+a)   :这里输出-->第三个a:123
    var b = function(){}       :这里将function(){} 赋值给了b,则b的值为function(){}
    console.log(b)             : 这里输出-->function(){}
    function d(){}			   :这里的d函数声明也已经提升了,所以这里不用管
    console.log(d)			   :这里拿到AO里面d的值,则输出-->function d(){}

最终输出:
    第一个a:function a(){}
    第二个a:123
    第三个a:123
    function(){}
    function d(){}