JavaScript词法分析

                    　　　　　　　　javascript词法分析

JavaScript中在调用函数的那一瞬间，会先进行词法分析。
一：词法分析的过程：

当函数调用的一瞬间，会先形成一个激活对象：Active Object（AO）,并会分析一下3个方面
01：函数参数，如果有，则会将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作
02：函数局部变量，如果AO上有同名的值，则不做任何操作，如果没有，则将此变量赋值给AO，并且值为undefined
03：函数声明，如果AO上有，则会将AO上的对象覆盖，如果没有，则不做任何操作。

二：词法分析例子

案例01：
var age=18;     //（第二步：发现没有函数参数，不做任何操作）
    function foo(){

    //（第三步，发现下面有局部变量age的声明，此时的AO的变量名字是age，且值为undefined（）
    //即：age=undefined。所以这时的age的值是undefined  在这之前是还未执行到age=22的。）

        console.log(age);
        var age=22;         //如果没有这个变量声明，打印的值应该是18
        console.log(age);
    }

    foo();  //调用函数，（第一步：瞬间形成了一个AO对象）

    //调用函数得到的值
    --> undefined
    -->22

词法分析例子02：
var age=18;
function foo(){
    console.log(age);
    var age=22;
    console.log(age);
    function age(){         //#发现age这个函数名也是变量，将OA上的变量给替换了，那么函数在执行的时候，
                            //去OA上找，发现OA是个函数，然后执行到age=22的时候，age才被重新赋值
        console.log("呵呵");
    }
    console.log(age);
}

foo();  //调用执行函数

结果：

--> ƒunction age(){
      console.log("呵呵");
    }
--> 22
--> 22

结果分析：
词法分析过程：

1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 22
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

也可以参考：https://www.cnblogs.com/zingp/p/6102561.html

转载于:https://www.cnblogs.com/one-tom/p/10146297.html