JS预编译

**在这一段时间系统的学习了一下JavaScript的知识,本来时不打算写博客的,但是为了以后好查阅,也为了总结自己的学习成果,所以在这里总结一下,也希望有什么不足之处你们能够指出,大家相互探讨一下。**
对于没有接触过编程的人,看这会有一定的难度,本文适合有一定基础的人,对于js前面要学习的知识希望你们认真学习再来看本文。好了现在我们开始本文的主题----》**预编译**。
学习预编译的目的,主要是为了了解js语言的执行过程,以及后面要学习到的原型,原型链和作用域等知识打下基础。
开始执行js代码前有三个步骤,即:
1.语法分析  ==》 检查js代码是否符合代码规范
2.预编译    ==》 代码执行前的操纵,就是在内存中开辟一些空间,存放一些变量与函数 
3.解释执行  ==》 代码执行
<script>
    var a = 10function fna){
        console.log(a);
        var a = 123;
        console.log(a);
        function a(){}
        console.log(a);
        var b = function(){}
        console.log(b);
    }
    fn(1);
</script>

上面输出的结果是什么呢?
按照c语言的思路理解,是不是应该输出1,123,function(){},function(){}呢,如果你这么认为那就大错特错了。实际的结果为function a(){},123, 123, function(){},为什么会这样呢?让我们来看一下代码执行前对代码做了什么吧。
最先开始检查语法是否错误,没有则开始执行预编译。
开始预编译开始
查找全局的变量声明作为GO的属性,值赋予为undefined,
查找全局的函数声明作为GO的属性,值赋予为函数体,

//伪代码
GO/window = {
    //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
    a: undefined,
    fn: function(){
        console.log(a);
        var a = 123;
        console.log(a);
        function a(){}
        console.log(a);
        var b = function(){}
        console.log(b);
    },
}
然后开始执行全局的代码,解释执行代码(直到执行函数fn)
//伪代码
GO/window = {
    //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
    a: 10,
    fn: function(){
        console.log(a);
        var a = 123;
        console.log(a);
        function a(){}
        console.log(a);
        var b = function(){}
        console.log(b);
    },
}

执行函数fn之前发生预编译
创建AO活动对象(Active Object)
查找形参和变量声明,值赋予undefined
实参值赋给形参
查找函数声明,值赋予函数体

**第一步:变量和函数进行提升**
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    a: undefined,
    b: undefined
}
**第二步:对形参进行赋值**
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    a: 1,
    b: undefined
}
**第三步:对函数进行赋值**
//注意:创建AO对象,是先对形参进行赋值,然后对函数声明进行赋值,因为函数引用a已经存在,所以会覆盖掉a的值1,变为function a(){}。
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    a:  function a(){}
    b:  undefined
}
**第四步:执行代码**
执行代码时,第一句console.log(a)首先会在AO对象里面找a属性的值,所以输出function a(){},然后执行赋值语句a=123,之后AO对象变化为下面这样
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    a:  123
    b:  undefined
}
所以再执行console.log(a)时会输出123,然后执行b的赋值操作变为
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    a:  123
    b:  function(){}
}
所以执行console.log(b)时会输出function(){},然后代码结束,所以最后的输出结果为
function a(){},123123function(){}

好了,不知道我讲的你们搞懂没。
大家要注意,
预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译
只有在解释执行阶段才会进行变量初始化

总结
预编译(函数执行前)※
1. 创建AO对象(Active Object)
2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
3. 实参形参相统一,实参值赋给形参
4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)
1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
3. 查找函数声明,函数名作为全局对象的属性,值为函数引用

当然还有一点要注意,代码执行之前首先是创建的全局的GO对象,执行到函数体的时候才创建AO对象,还有一点就是赋值语句发生在语句执行之后,而不是在预编译的时候,而形参与实参的匹配则是发生在预编译的时候,函数声明也是发生在编译的时候,像var b = function(){}是一个赋值语句,不是函数声明,所以发生在执行的时候而不是预编译的时候。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值