javascript 执行过程
1.语法检测 看你有没有基本的语法错误,例如中文,关键字错误...
2.词法分析(预编译)
3.逐行执行
变量声明提升,函数声明整体提升
预编译的过程:
案例1：
console.log(a); // console.log(b) var a = 100; console.log(a) var b = 200 var c = 300 function a(){ } function fun(){ } // 分析： // 1.全局 直接是script标签中的代码,不包括函数执行 // 执行前: // 1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析 // GO = { // 自带的属性都不写 // } // 2.分析变量声明,变量名为属性名,值为undefined // GO = { // a : undefined, // b : undefined, // c : undefined // } // 3.分析<b>函数声明</b>,函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖 // GO = { // a : function a(){ // // }, // b : undefined, // c : undefined, // fun : function fun(){ // // } // } // 此时,GO就是预编译完成的最终对象,词法分析结束 // 4.逐行执行，分析过（变量声明，函数声明）不用管了，只管赋值（变量赋值） // 11行的时候,a赋了一次值,值改变为100 // GO = { // a : 100, // b : undefined, // c : undefined, // fun : function fun(){ // // } // }
案例2：
1 function fun(num){ 2 console.log(num); //10 3 var num = 5; 4 console.log(num); //5 5 } 6 fun(10) 7 8 // 1.生成GO 9 // GO = { 10 // fun : function 11 // } 12 // 2.逐行执行 13 // 走到第14行,函数的调用 14 // 3.函数的调用,就会生成fun.AO 15 // fun.AO = { 16 // 17 // } 18 // 4.分析参数 19 // fun.AO = { 20 // num : 10 21 // } 22 // 5.分析var 23 // fun.AO = { 24 // num : 10 25 // } 26 // 6.分析函数声明 没有,略 27 // fun.AO = { 28 // num : 10 29 // } 30 // 7.逐行执行 第11行的时候,发生了赋值 31 // fun.AO = { 32 // num : 5 33 // }
案例3：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function fun(a,b){ 10 console.log(a); //1 11 console.log(b); //undef 12 var b = 234; 13 console.log(a); //fun 14 console.log(b); //234 15 a = 123; 16 console.log(a); //123 17 console.log(b); //234 18 function a(){ 19 20 } 21 console.log(a); //123 22 console.log(b); //234 23 var b = function(){} 24 console.log(a); //123 25 console.log(b); //fun 26 } 27 fun(1); 28 29 // 1.fun.AO = {} 30 // 2.参数 31 // fun.AO = { 32 // a : 1 33 // b : undefined 34 // } 35 // 3.变量声明,同名的为b不去做修改 36 // fun.AO = { 37 // a : 1 38 // b : undefined 39 // } 40 // 4.函数声明 41 // fun.AO = { 42 // a : function 43 // b : undefined 44 // } 45 // 46 // 逐行执行 47 // 12行 赋值 48 // fun.AO = { 49 // a : function 50 // b : 234 51 // } 52 // 15行 赋值 53 // fun.AO = { 54 // a : 123 55 // b : 234 56 // } 57 // 23行 赋值 58 // fun.AO = { 59 // a : 123 60 // b : fun 61 // } 62 </script> 63 </body> 64 </html>
案例4：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function test(){ 10 console.log(b); //undefined 11 if(a){ //undefined转换成false 12 var b = 100; 13 } 14 c = 123; 15 console.log(c); //123 16 } 17 var a; 18 test(); 19 a = 20; 20 test(); 21 console.log(c); //123 22 23 // 1.生成GO 24 // GO = { 25 // 26 // } 27 // 2.var 28 // GO = { 29 // a : undefined 30 // } 31 // 3.函数声明 32 // GO = { 33 // a : undefined, 34 // test : function 35 // } 36 // 4.逐行执行 37 // 4.1.1 18行,test调用,生成test.AO ={} 38 // 4.1.2 参数 没有,跳过 39 // 4.1.3 var 40 // test.AO = { 41 // b : undefined 42 // } 43 // 4.1.4 函数声明 没有,跳过 44 // 4.1.5 结果 45 // test.AO = { 46 // b : undefined 47 // } 48 // 4.1.6 逐行执行 49 // 14行,改变GO 50 // GO = { 51 // a : undefined, 52 // test : function, 53 // c : 123 54 // } 55 // 56 // 4.2 19行 a值发生了改变 57 // GO = { 58 // a : 20, 59 // test : function, 60 // c : 123 61 // } 62 // 63 // 4.3 20行,test调用 生成test.AO={} 64 // 4.3.1 参数 没有 65 // 4.3.2 变量声明 66 // test.AO = { 67 // b : undefined 68 // } 69 // 4.3.3 函数声明 没有 70 // 4.3.4 结果 71 // test.AO = { 72 // b : undefined 73 // } 74 // 4.3.5 逐行执行 75 // test.AO = { 76 // b : 100 77 // } 78 </script> 79 </body> 80 </html>
案例5：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>词法分析</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function fn(a){ 10 console.log(a); 11 var a = 123; 12 console.log(a); 13 function a(){}; 14 console.log(a); 15 var b = function(){} 16 console.log(b); 17 function c(){}; 18 console.log(c); 19 } 20 fn(1); 21 22 /*1.首先生成一个GO = {} 23 2.var变量声明 没有,跳过 24 3.函数声明 25 GO = { 26 fn : function 27 } 28 4.执行过程 29 4.1 20行,fn函数开始调用,调用生成fn.AO = {} 30 4.2 参数 31 fn.AO = { 32 a : 1 33 } 34 4.3 var变量声明 35 fn.AO = { 36 a : 1, 37 b : undefined 38 } 39 4.4 函数声明 40 fn.AO = { 41 a : function a(){}, 42 b : undefined 43 c : function c(){}; 44 } 45 4.5 逐行执行 46 4.5.1 11行,赋值 47 fn.AO = { 48 a : 123, 49 b : undefined 50 c : function c(){}; 51 } 52 4.5.2 15行,赋值 53 fn.AO = { 54 a : 123, 55 b : function(){} 56 c : function c(){}; 57 }*/ 58 </script> 59 </body> 60 </html>
案例6：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
a = 100;
function demo(e){
function e(){}
arguments[0] = 2;
console.log(e); //2
if(a){ //false
var b = 123;
function c(){
}
}
var c;
a = 10;
var a;
console.log(b); //undefined
f = 123;
console.log(c); //function undefined,兼容性问题，函数声明如果在if判断中，老版本（IE8及以下），输出的确实是function，典型的bug
console.log(a); //10
}
var a;
demo(1);
console.log(a); //100
console.log(f); //123
// 1.生成GO GO = {}
// 2.var声明
// GO = {
// a : undefined
// }
// 3.函数声明
// GO = {
// a : undefined
// demo : function
// }
// 4.逐行执行
// 4.1 第9行 赋值
// GO = {
// a : 100
// demo : function
// }
// 4.2 第29行 demo函数调用 生成demo.AO = {}
// 4.2.1 分析参数
// demo.AO = {
// e : 1
// }
// 4.2.2 分析变量声明
// demo.AO = {
// e : 1,
// b : undefined,
// c : undefined,
// a : undefined
// }
// 4.2.3 函数声明
// demo.AO = {
// e : function,
// b : undefined,
// c : function,
// a : undefined
// }
// 4.2.4 逐行执行
// 4.2.4.1 12行 赋值
// demo.AO = {
// e : 2,
// b : undefined,
// c : function,
// a : undefined
// }
// 4.2.4.2 21行 赋值
// demo.AO = {
// e : 2,
// b : undefined,
// c : function,
// a : 10
// }
// 4.2.4.3 24行 赋值 此时赋值是修改GO
// GO = {
// a : 100
// demo : function,
// f : 123
// }
// 4.3
</script>
</body>
</html>
