JavaScript的解析与执行

1:预处理阶段

当输入如下代码时候

var a = 1;
function crli(){
    alert(a);
}
crli()//1
 
 
1
2
3
4
5
 
 
1
2
3
4
5

结果为 1

当改变下面代码时候

var a = 1;
function crli(){
    alert(a);
    var a = 5;
}
crli()//undefined
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

结果为 undefined

这是为什么呢？

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

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

1 . 全局状态

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

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

}
 
 
1
2
3
4
5
6
7
8
9
10
11
 
 
1
2
3
4
5
6
7
8
9
10
11

如果非函数声明、非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
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

例子2：

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

lexical environme
{
    a:undefined
}
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

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

alert(f);//function f(){console.log("s");}
function f(){
    console.log("s");
}
var f = 5;
window
{
    f:指向函数
}
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

alert(f);//function f(){console.log("q");}
function f(){
    console.log("s");
}
var f = 5;
function f(){
    console.log("q");
}
window
{
    f:指向函数
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
 
 
1
2
3
4
5
6
7
8
9
10
11
12

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:
}                           }
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此时解释

var a = 1;
function crli(){
    alert(a);
    var a = 5;
}
crli()//undefined
window 
{
    a : 1
    crli:指向函数
}
lexical environme 
{
    a:undefined
}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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