JavaScript词法分析解析

函数在调用之前,会进行词法分析或者叫语法分析:

1. 函数在形成调用的那一瞬间,会有一个活动对象叫 active object ,简称AO,会分析如下几条:

  形式参数

  函数内局部变量声明

  函数声明表达式

 

如下面的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #main{
    background-color:red;
    width:300px;
    height:400px;
    }
    #content{
    background-color:pink;
    width:150px;
    height:200px;
    }
</style>
<body>
    <script>
        function t1(age){
            console.log(age); //function
            var age=27;
            console.log(age); //27
            function age(){}
            console.log(age); //27
        }
        t1(3);
    </script>
</body>
</html>

 

词法分析阶段

1.形式参数age.  会赋给AO对象,

    AO.age=undefined;

    AO.age=3; 把之前的undefined给覆盖了。

2,分析函数内局部变量声明

    只是分析阶段,并没有执行。所以它不知道age=27。

    AO.age=undefined; 如果形式参数中有某个变量已经存在的话,则在这步将不做任何改变。所以还是AO.age=undefined

    

3,函数内声明表达式,优先级最高。比前两步的优先级都高。如果名字相同的话, 会把前两步的都覆盖掉。

    AO.age=function( ); 这步优先级比较高,即使前面两步已经出现age变量了,它也要进行分析。

 把前两步都覆盖了,分析的结果是:AO.age=function( );

 

总结:优先级顺序:声明表达式>形式参数>函数内局部变量声明 

 

函数执行阶段 

 到这步的时候console.log(age),会从活动对象AO上去找。找到AO.age=function( );

到var age=27; 的时候,发现age变了,所以输出27. 最后一步因为没有被改变,所以输出的也是27.

 

执行效果:

 

 

4. 用上面的词法分析,分析如下函数:

<script>
    function t1(){
        console.log(name);
        var name='Alex';
    }
    t1();
</script>

 A-分析形式参---没有

B--分析声明表达式-(var name="alex") 有一个name=undefined;

C-函数声明表达式---没有

 

posted on 2017-08-30 10:45  momo8238  阅读(701)  评论(0编辑  收藏  举报