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
            
        }

输出结果

最后

以上就是自觉月饼为你收集整理的js解析与执行的过程的全部内容，希望文章能够帮你解决js解析与执行的过程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。