预解析

醉酒当歌 提交于 2020-03-08 04:48:01

预解析

JS代码在执行之前,会对代码进行预解析,寻找作用域中的var 和function ,然后对其进行事先声明,在从上到下执行代码。这就是一个预解析的过程。

预解析机制

js代码只执行前,会把函数或者变量声明提升所在作用域的最顶端
注意点:只是声明提前(变量声明和函数声明),变量的赋值和函数的调用留在原地 依次执行

全局作用域

GO对象:全局对象
a 生成一个GO对象,封装的就是作用域 GO={}
b 分析变量声明(var) 就是声明的变量名作为Go对象的属性名 值为undefinde
c 分析函数声明 函数名作为Go对象的属性名,属性值为函数体,如果有遇到同名函数,直接覆盖

 console.log(a);
        var a = 12;

        function a() {
            var a;
            var a = function() {

            }
        }
        /*
        1生成一个GO对象:GO={}
        2分析变量声明   GO={a:undefined}
        3分析函数声明   GO={a:function a() {
            var a;
            var a = function() {

            }
        }}
        */

AO对象(活动对象)

AO的步骤
在函数执行前的一瞬间,
1生成一个AO对象
2. 分析参数 ,以形参作为该对象的属性名,实参作为属性值
3. 分析变量声明(var声明的变量) 变量名为属性名 ,值为undefined 如果遇到同名,则不做任何改变
4. 分析函数声明 函数名为属性名 函数整体作为属性值
变量的提升优先级大于函数声明的提升

   function fn(a) {
            console.log(a); //函数体

            var a = 123;

            console.log(a); //123

            function a() {};

            console.log(a); //123

            var b = function() {}

            console.log(b); //函数体

            function c() {};

            console.log(c);
        }
        fn(1);
        /*
        1声明 AO对象 fn.AO={}
        2分析参数  fn.AO={a:1}
        3分析变量 fn.AO={a:1,b:undefined}
        4 分析函数 fn.AO={a:function a(){},b:undefined,c:function c(){}}
        */

案例

 		var num = 10;
        fun();

        function fun() {
            console.log(num); //undefined
            var num = 20;
        }
        console.log(num) //10
            /*
                1.生成GO GO={};
                2.分析变量 GO={num:undefined};
                3.分析函数 GO={fun: function fun() {
                console.log(num);
                var num = 20;
            }};
                4.走到某一行的时候;num产生了一次赋值;此时GO对象变成了:GO={num:10}
                                     

                1.生成AO对象 fun.AO={};
                2.分析参数 略过
                3.分析变量 fun.AO={num:undefined};
                4.分析函数 略过;
                */

  		console.log(bar());

        function bar() {
            foo = 10;

            function foo() {

            }
            var foo = 11;
            return foo;
        }
        /*
       

        1生成AO对象 bar.AO={}
        2.分析参数 略过
        3.分析变量 bar.AO={foo:undefined}
        4.分析函数 bar.AO={foo:function foo(){}} 
        走到某一行的时候;foo产生了一次赋值; bar.AO={foo:11} 
        */
 function test() {
            console.log(b); //undefined
            if (a) {
                var b = 100;
            }
            c = 234;
            console.log(c); //234
        }
        var a;
        test();
        a = 10;
        test();
        console.log(c); //234

        /*
        1.生成GO对象 GO={}
        2.分析变量 GO={a:undefined,c:undefined}
        3.分析函数 GO={function test(){}}

        1生成AO对象 test.AO={}
        2.分析参数 略过
        3.分析变量 test.AO={b:undefined}
        4.分析函数 略过
        */

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!