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