脚本宝典收集整理的这篇文章主要介绍了js实例教程-JS执行顺序语法分析及预编译讲解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

一、语法分析

浏览器将所有JS检查一遍，看有没有语法错误，这里并不会执行，没有错误则进行第二步，预编译

二、预编译

首先要理解函数声明整体提升，变量 声明提升。

这里要注意变量的提升，一般我们声明一个变量都是

[html] view plain copy

var a = 1;  

console.log(a) //1  

//但实际上拆分成了两步,真正执行是这样的  

var a;  

a = 1;  

console.log(a) //1  

[html] view plain copy

//如果将console.log放a前面会打印出undefined  

console.log(a) //undefined  

var a = 1;  

//因为变量的声明提升了，但是赋值并没有提升，实际上是这样的  

var a;  

console.log(a);  

a = 1;  

1、预编译的时候会创建一个AO对象（Activation Object）执行上下文；

2、找形参和变量声明，将形参和变量作为AO对象的属性名，值为undefined;

3、将形参和实参统一；

4、在函数体里找函数声明，值赋给函数体

举个例子：

[html] view plain copy

function fn(a){  

<span style="white-space:pre;">    </span>console.log(a);             

    var a = 123;  

    console.log(a);  

    function a(){};  

    console.log(a);  

    var b = function(){};  

    console.log(b);  

    function c();  

}  

fu(1);  

[html] view plain copy

//打印结果依次对应  

function a(){}  

123  

123  

function(){}  

[html] view plain copy

function fn(a){  

    console.log(a);  

    var a = 123;  

    console.log(a);  

    function a(){}  

    console.log(a);  

    var b = function(){}  

    console.log(b)  

    function c();  

}  

fn(1)  

预编译的时候创建一个AO对象：  

1、预编译的时候会创建一个AO对象（Activation Object）执行上下文；  

AO={  

}  

2、找形参和变量声明，将形参和变量作为AO对象的属性名，值为undefined;  

AO={  

    a : undefined,  

    b : undefined,  

}  

3、将形参和实参统一  

AO={  

    a : 1,  

    b : undefined  //此时b还是undefined，前面已经说了，是变量声明提升，赋值并没有提升  

}  

4、在函数体里找函数声明，值赋给函数体  

AO={  

    a : function a(){},   //此时a的值已经被覆盖了，因为函数声明整体提升  

    b : undefined,         //b不是函数声明，是函数表达式  

    c : function c(){}  

}  

最后执行的时候是从AO里面取值  

第一个console.log(a) 打印 function a(){}  

第二个console.log(a) 因为又重新定义了a,所以打印 123  

第三个console.log(a) 和第二个同理，打印 123  

第四个console.log(b) 因为把一个函数赋值给了b,所以打印 function (){}  

三、语句执行

[html] view plain copy

最后执行的时候是从AO里面取值  

第一个console.log(a) 打印 function a(){}  

第二个console.log(a) 因为又重新定义了a,所以打印 123  

第三个console.log(a) 和第二个同理，打印 123  

第四个console.log(b) 因为把一个函数赋值给了b,所以打印 function (){}  

function fn(a){  

    /*  

        *这里都是隐式声明  

        var a,b;这里的变量提升到函数头部，但是赋值不会提升  

        a = 1;形参赋值  

        a = function a(){}  因为又有一个函数a,函数声明整体提升  

        c = function c(){}  因为有一个函数c，函数声明整体提升  

        然后开始从上往下执行  

    */  

    console.log(a);  

    var a = 123;  

    console.log(a);  

    function a(){}  

    console.log(a);  

    var b = function(){}  

    console.log(b);  

    function c();  

}  

fn(1);  

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JS执行顺序语法分析及预编译讲解全部内容，希望文章能够帮你解决js实例教程-JS执行顺序语法分析及预编译讲解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。