JavaScript词法分析(尽力理解)

Posted 2020-12-24 woz333333

JavaScript中在调用函数的那一瞬间之前，会先进行词法分析

 

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找

看两个例子：

第一个：

1 var age = 18;
2 function foo(){
3   console.log(age);
4   var age = 22;
5   console.log(age);
6 }
7 
8 foo();  // 问：执行foo()之后的结果是？

 

第二个：

 1 var age = 18;
 2 function foo(){
 3   console.log(age);
 4   var age = 22;
 5   console.log(age);
 6   function age(){
 7     console.log("呵呵");
 8   }
 9   console.log(age);
10 }
11 
12 foo();  // 执行后的结果是？

 

最后答案解析：

第一题:

undefined 22

1 过程：
2 　　执行前有一个局部变量，形成AO.age = undefined
3 　　开始执行，第一个输出age，此时age为undefined，输出undefined
4 　　赋值22给age
5 　　第二个输出age，此时age已经有了值就输出22

 

第二题:

先输出函数 然后是两个22

 1 词法分析过程：
 2 1、分析参数，有一个参数，形成一个 AO.age=undefine;
 3 2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
 4 3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
 5 
 6 最终，AO上的属性只有一个age，并且值为一个函数声明
 7 
 8 执行过程：
 9 注意：执行过程中所有的值都是从AO对象上去寻找
10 
11 1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
12 2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
13 3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
14