js的解析与执行过程

81 阅读 0 评论 54 点赞

我是靠谱客的博主缓慢盼望，最近开发中收集的这篇文章主要介绍js的解析与执行过程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1:预处理阶段

当输入如下代码时候

var a = 1;
function crli(){
    alert(a);
}
crli()//1

结果为 1

当改变下面代码时候

var a = 1;
function crli(){
    alert(a);
    var a = 5;
}
crli()//undefined

结果为 undefined

这是为什么呢？

js解析与执行过程一共有2个阶段，一个预处理阶段，一个是执行阶段（可以看成全局预处理阶段和执行阶段，以及函数预处理阶段和执行阶段）

当js解析代码时候，会先创建一个lexical environme这么一个对象，然后扫描js代码两个部分：
一个是用声明方式创建的函数，
另一个是用var 定义的变量，
然后把函数和变量的名字加到lexical environme中，比方说

1 . 全局状态

lexical environme(**全局的环境对象===window**)
{
    a:undefined
    crli:对函数的一个引用
}

var a =5;
b = 1;
function crli(){

}

如果非函数声明、非var方式声明的变量，则预处理阶段不会将函数和变量的名字加到lexical environme中
例子1：

a();//aa
b();//b is not a function

function a() {
    console.log("aa");
}
var b = function b(){
    console.log("bb");
}

lexical environme
{
    a:对函数的一个引用
    b:undefined
}

例子2：

console.log(a);//undefined
console.log(b);//b is not defined
var a = 1;
b = 2;

lexical environme
{
    a:undefined
}

当遇到函数声明有冲突时候后者会覆盖前者，
变量声明有冲突时候，会忽略

alert(f);//function f(){console.log("s");}
function f(){
    console.log("s");
}
var f = 5;
window
{
    f:指向函数
}

alert(f);//function f(){console.log("q");}
function f(){
    console.log("s");
}
var f = 5;
function f(){
    console.log("q");
}
window
{
    f:指向函数
}

2 . 函数状态

function f(a,b){
    alert(a);
    alert(b);
    var b = 100;
    function a(){
    }
}
f(1,2)//function a(){}
      //2

当遇到函数声明有冲突时候后者会覆盖前者，
变量声明有冲突时候，会忽略

lexical environme           lexical environme
{                           {
    a:1                          a:指向函数
    b:2             ==>          b:2
    arguments:                   arguments:
}                           }

此时解释

var a = 1;
function crli(){
    alert(a);
    var a = 5;
}
crli()//undefined
window 
{
    a : 1
    crli:指向函数
}
lexical environme 
{
    a:undefined
}

函数预处理
执行时，alert(a) 所以是undefind