JS预编译

引入:

function a(){
    console.log("a");
}
a();        //输出"a"

b();        //输出"b"
function b(){
    console.log("b");
} 

c();        //报错,c is not a function
var c=function(){
    console.log("cc");
}

函数声明整体提升:从上面的代码可以看出,无论在函数声明前调用还是在函数声明后调用,函数都能正常调用(c函数是通过函数表达式生成的,不算函数声明)。

变量声明提升: var a=123; 实际上拆分为 var a ;和 a=123 ;

暗示全局变量:即任何变量,如果未经声明就赋值,此变量就为全局对象(window)所有。

例如:var a=b=123 ;即把123赋给b,然后将b赋给a。因为b未声明,则b默认就成为全局变量。b=window.b,值为123。

预编译(了解执行顺序):

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);                //function a(){} 123  123  function (){}

(函数)预编译的步骤:

1、创建活动对象Activation Object。

2、找到形参和变量声明,作为AO的属性,赋值为undefined。

3、将实参的值传到形参里(同时修改AO对应属性的值)

4、在函数体里找到函数声明,值赋予函数体。

结合上例分析:

1、AO={a:undefined , b:undefined}

2、AO={a:1 , b:undefined}

3、AO={a:function a(){} , b:undefined ,d:function b(){} }                //b是函数表达式,不是函数声明

4、console.log(a)                                                                          //function a(){}

5、var a=123 ; console.log(a)                                                       //123

6、console.log(a)                                                                          //123

7、var b=function(){}  console.log(b)                                            //function(){}

全局的预编译:

console.log(a);        //undefined
var a=123;
----------------------------------------
console.log(a);        //123
var a=123;
function a(){}

(全局)预编译的过程:

1、创建GO对象,Gobal Object。

2、找变量声明,作为GO对象的属性,赋值为undefined。

3、在函数体里找到函数声明,值赋予函数体。

结合上例分析:

1、GO={}

2、GO={ a:undefined }

3、GO={ a:function(){} }

4、var a=123;

所以,console.log(a) 为123;

再来一个例题:

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

解析:因为先执行的console.log(),所以先生成GO对象

1、寻找变量声明 赋值为undefined GO={ test:undefined }

2、寻找函数声明 GO={ test:function(){} }

3、执行console.log(test) 输出function(){}

4、再执行test(1),执行前先生成AO对象

5、寻找形参和变量声明 AO={ test:undefined }

6、寻找函数声明 AO={ test:function(){} }

7、console.log(test)  输出function(){}

8、var test=234; console.log(test); 输出234

再来一个例题:

g=123;
function func(){
    console.log(g);
    g=456;
    console.log(g);
    var g=789;
}
func();
var g;

1、先生成GO

2、寻找变量声明 GO={ g:undefined }

3、寻找函数声明 GO={ g:undefined , func:function(){} }

4、执行g=123 GO={ g:123 , func:function(){} }

5、执行func之前先生成 AO

6、寻找形参和变量声明 AO={ g:undefined }

7、寻找函数声明 无

8、console.log(g)    输出undefined

9、g=456;  console.log(g)  输出456

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值