• JavaScript词法分析解析


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

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

      形式参数

      函数内局部变量声明

      函数声明表达式

    如下面的实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        #main{
        background-color:red;
        300px;
        height:400px;
        }
        #content{
        background-color:pink;
        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-函数声明表达式---没有

  • 相关阅读:
    盒模型
    DTD
    JS 中的 __proto__ 、prototype、constructor
    ES 5 中 判断数组的方法
    js keyup、keypress和keydown事件
    webpack 安装 url-loader 模块后,图片地址展示错误问题
    前端展示PDF内容
    对象的深拷贝
    IE 11 中不知promise 的 finally 方法
    js判断一个字符串是否为纯数字组成
  • 原文地址:https://www.cnblogs.com/momo8238/p/7451943.html
Copyright © 2020-2023  润新知