JavaScript中的Lexical Environment

概要

本文主要介绍JavaScript中的一个重要概念Lexical Environment，它可以帮助我们解释我们为什么可以通过嵌套方法，共享数据，以及为什么可以在函数中定义一个和全局变量同名的变量，并且不会影响到全局变量。

基本分析

基本概念

简单来说Lexical Environment就是一块内存空间和指向其父级的Lexical Environment的引用。

本文还会涉及一些概念如GEC，FEC等，如果要了解，可以参考本人的文章Javascript的Execution Context

代码实例

我们看如下代码：

function a(){
    var b = 10;
    c();
    function c(){
        console.log(b);
    }
}
var b = 0;
a();
console.log(b);

上面代码的指向结果如下：

代码分析

第一步，JS Engine 在Call Stack中创建GEC （Global Execution Context），按照Lexical Environment的定义，它是一块内存空间，已经一个指向父级的引用，GEC的Parent Lexical Environment引用为空。

下图中虚线圈出的区域即为GEC的Lexical Environment

第二步，开始执行全局的代码

在 b等于10的赋值语句执行后， GEC中的变量b被赋值为10，然后该代码被JS Engine删除。

第三步，建立a的函数执行上下文FEC，FEC中的Lexical Environment除了保留本地变量b和c函数的定义以外，还有一个指向GEC的Lexical Environment的引用；

第三步，开始逐行执行a方法，在执行了对b的赋值语句后，b在本地FEC中被修改成了10，然后调用c函数，为c函数建立FEC

在执行c方法的console.log时候，在c方法的FEC中并没有b，所以根据其Lexical Environment的父级引用关系，在b方法的FEC中找到b变量，因此会打印10；

第四步，c方法执行完毕，JS Engine将其FEC从从Call Stack中删除；

第五步，a方法执行完毕，JS Engine将其FEC从从Call Stack中删除；

第六步，执行全局的console.log(b);，b变量在GEC中的值依旧是0，并没有修改，所以打印的还是0。

结论

Lexical Environment实际上就是GEC和不同的FEC的联接纽带，有了它，存在嵌套关系的方法直接就可以共享其FEC，从而实现数据的共享。