js解析与执行的过程

预编译

预编译:扫描JS中的用var声明的变量,定义的函数并将它们加到预处理阶段的词法环境中去。

变量的定义=变量声明+变量赋值 如:var carName=1 为函数定义

注意:预编译只提升函数的声明部分,w3c中如下图定义函数声明,及预编译只提升var carName,变量未赋值时里面存undefined;函数在预编译时是提升定义的函数,不是函数表达式。
在这里插入图片描述
比如说下面的代码

<script>
        var a = 1; //var 声明的变量  已赋值
        var b; //var 声明的变量  未赋值
        c = 2; //为声明  直接复制

        function d() { //用声明的方式定义的函数
            a = 0;
        }
        var e = function() { //函数表达式
            a = 0;
        }
    </script>

预处理提升的数据可以存到两个地方,分别是全局执行上下文和window,上面结果可以理解成下面作用域.

EC(G){    //EC(G)可以理解为全局执行上下文
                a    undefined
                d    对应地址
                e    undefined
            }
GO{    //GO可以理解为window
                a    undefined
                d    对应地址
                e    undefined
            }

命名冲突的处理

看看下面的代码,你能说对几个?

//1
console.log(a);
var a = 1;
function a(){
    console.log('hello');
}
//2
console.log(a);
function a(){
    console.log('hello');
}
var a = 1;
//3
console.log(a);
var a = 1;
var a = 2;
//4
console.log(a);
function a(){
    console.log('red');
}
function a(){
    console.log('white');
}

第一个输出 :function a(){console.log(‘hello’);}
第二个输出 :function a(){console.log(‘hello’);}
第一个输出 :undefined
第一个输出 :function a(){console.log(‘white’);}
我理解为:处理函数定义有冲突时,会覆盖;处理变量定义有冲突时,会忽略。在既有函数定义又有变量定义的时候,最后往往会指向函数定义的引用。

全局执行上下文

比如下面的代码

<script>
        var a = 1; //var 声明的变量  已赋值
        var b; //var 声明的变量  未赋值
        c = 2; //为声明  直接复制

        function d() { //用声明的方式定义的函数           
            var b = 2;
            a=1;
            console.log(a)
        }
        var e = function() { //函数表达式
            a = 0;
        }
        d(5);
</script>

预处理后

EC(G){    //EC(G)可以理解为全局执行上下文
                a    undefined
                d    对应地址 如:0x000fff
                e    undefined
            }

全局代码执行

EC(G){    //EC(G)可以理解为全局执行上下文
                a    1
                d    对应地址 如:0x000fff
                e    对应地址 如:0x111fff
                
            }

调用函数d(5),函数内部预编译

 EC(d){
            b        undefined
            
        }

函数内部代码执行

 EC(d){
            b        2
            
        }

输出结果
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45631722/article/details/107414505