JS的解析与执行过程—全局预处理阶段之全局词法环境对象

问题：有如下代码

var a = 1;
function pop() {
    alert(a);
    var a = 5;
}
pop();//执行结果，弹出undefined

这段代码的执行结果为undefined,为什么呢？

JS的解析与执行并不是读一行，处理一行，读一行，处理一行这样进行的，而是分为两个阶段：

1、预处理阶段；

2、执行阶段；

然后分别以全局和函数内部的局部代码而言：

1、全局预处理

在解析JS代码的时候，首先会创建一个全局LexicalEnviroment{ }(词法环境)对象

接下来扫描JS代码里面的两个部分：

a、用声明的方式创建的函数；

b、用var定义的变量；

扫面完毕后将这些变量及函数添加到全局的词法环境对象里面去；

LexicalEnviroment: {
    a: undefined,
    b: undefined,
    test: 对函数的一个引用
}

//用声明的方式创建的函数
function test(params) {
    
}
//用函数表达式创建的函数
var test1 = function(params) {
    
}
//用var定义的变量
var a = 5;
var b;
//其他变量
c = 6;

定义一个声明函数和一个函数表达式来证明这一点，代码如下：

f();
g();

function f() {
    console.log("ff");
}
var g = function() {
    console.log("gg");
}

得到如下结果：

ff
e:CodeJavaScriptday03	est2.js:2
g();
^

TypeError: g is not a function

函数f被正常执行，而函数g报错了

因为在预处理阶段，函数f的引用被放在LexicalEnviroment对象中了，而g没有，所以在调用时函数g()并不存在，所以报错。

改一下位置，这样就对了

f();
var g = function() {
    console.log("gg");
}
g();

function f() {
    console.log("ff");
}

这点在var定义变量上的体现：

console.log(a);
console.log(b);

var a = 5;
b = 6;

这段代码的执行结果如下：

undefined
e:CodeJavaScriptday03	est3.js:2
console.log(b);
            ^

ReferenceError: b is not defined

可见，如上所说，以var方式定义的a被添加到全局LexicalEnviroment{ }(词法环境)对象中了，其值为undefined，而直接定义的b此时不存在，所以报错。

这就是全局预处理阶段的过程。

声明：

关于全局的词法环境对象LexicalEnviroment，在浏览器中就约等于window对象，该对象是属于JS解析器的东西，在不同的地方叫法不同，比如在Node中称为Execute Context(运行上下文对象)或许更合适一点，在ECMA -262标准中有其解释，但我们无需关心其具体含义，只是有这个概念便可。