JavaScript词法分析(尽力理解)

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