javaScript代码在执行前会经过一个耗时极短的编译过程，并在编译完成后立即运行。

我们以一段代码为例，看看这个过程的一些细节：

var a = 1;
function fun1 (b) {
    var c = 2;
    return c + b + a;
}
var sum = fun1(3);

我们暂时不关注编译器词法分析、语法分析、代码生成及优化的部分，而是看一看这一过程中上下文做了哪些事。

一、全局上下文

1.建立一个空的全局上下文

编译器首先会创建一个全局上下文，我们叫它global_context吧。全局上下文格式大致如下：

global_context: {
    Variable_Object: {}, // 当前上下文的变量对象
    Scope: [global_context.Variable_Object], // 当前上下文的作用域链
    this: {} // this对象
}

[注1]：Scope的值如何取：

全局上下文： global_context.Variable_Object,也就是全局上下文的VO对象
执行上下文：execute_context.Scope = execute_context.Variable_Object + global_function1.scope,也就是把当前执行上下文的VO对象添加到执行的函数的scope数组第一位

[注2]：上下文对象的结构仅为伪代码，并非实际结构。同时VO与存储直接的交互细节我们也不考虑。
[注3]：本文中我们暂时不考虑this的细节。

2.上下文入栈

将当前的上下文global_context压入一个栈中，我们可以称这个栈为context_stack。如图所示：

全局上下文入栈

3.获取当前上下文变量对象(预处理)

在这一阶段，实际上发生的是JavaScript的声明提升过程，声明提升详情见JavaScript声明提升。
所以我们先将变量的声明提升，也就是将所有声明的变量存放在global_context.Variable_Object（VO）中：

编译器看到var a = 1;这一句，就查询当前上下文（global_context）有没有这个变量，也就是看看Variable_Object(简称VO)里面有没有变量a。发现没有，就将a加进去，值为undefined，如果有，就重新赋值：

global_context: {
    Variable_Object: {
        a: undefined
    },
    Scope: [global_context.Variable_Object],
    this: {}
}

之后，继续将全局变量var sum加入全局上下文的VO:

global_context: {
    Variable_Object: {
        a: undefined,
        sum: undefined
    },
    Scope: [global_context.Variable_Object],
    this: {}
}

接着，将函数声明提升：
编译器看到function fun1，判断这是一个函数声明，将函数声明也加到VO，值为函数的地址。同时，还会在给这个函数对象加一个属性scope，值为当前上下文的Scope值：

global_context: {
    Variable_Object: {
        a: undefined,
        fun1：{
            函数 global_function1的地址,
            scope: [global_context.Variable_Object]
        },
        sum: undefined
    },
    Scope: [global_context.Variable_Object],
    this: {}
}

4.执行代码

经过编译后，在全局上下文中执行的代码实际上是以下代码：

a = 1;
sum = fun1(3);

我们一句一句执行：

a = 1;实际上就是查询当前上下文的VO中有没有变量a,如果有，就给a赋值1:

global_context: {
    Variable_Object: {
        a: 1,
        fun1：{
            函数 global_function1的地址,
            scope: [global_context.Variable_Object]
        },
        sum: undefined
    },
    Scope: [global_context.Variable_Object],
    this: {}
}

sum = fun1(3);同理，先看右边，找到变量fun1，()说明这个函数需要立即执行，我们执行这个函数，然后把结果赋值给变量sum。

二、执行上下文

编译器并没有立即执行函数fun1中的代码，因为它要为函数创建一个专门的context，我们叫它执行上下文（execute_context）吧，因为每当编译器要执行一个函数时，都会创建一个类似的context。

1.建立一个空的执行上下文

execute_context也是一个对象，并且与global_context还很像，下面是它里面的内容：

execute_context: {
       Variable_Object: {},
       Scope: [execute_context.Variable_Object, global_context.Variable_Object ],
       this: {}
}

注意：当前执行上下文的Scope如何取值：
当前上下文时函数fun1的执行上下文，我们先取fun1.scope也就是[global_context.Variable_Object]，
然后将当前上下文的VO也就是execute_context.Variable_Object添加到[global_context.Variable_Object]的第一位，变成了[execute_context.Variable_Object, global_context.Variable_Object ]。

2.执行上下文入栈

执行上下文入栈

3.预处理

对与代码

function fun1 (b) {
    var c = 2;
    return c + b + a;
}

我们直接分析对这段代码进行声明提升后的伪代码：

function fun1 (var b) {
    var c;
    b = 参数;
    c = 2;
    返回值 = c + b + a;
    return 返回值;
}

对与变量声明，我们在当前上下文的VO中存放这些对象:

execute_context: {
        Variable_Object: {
            b: undefined,
            c: undefined,
            arguments: [] // 形参列表
        },
        Scope: [execute_context.Variable_Object, global_context.Variable_Object ],
        this: {}
}

[注4]：arguments对象是一个用于存放形参的数组，例如我们这样调用函数fun1(1,2,3)，这时就需要用arguments来存放我们未写明形参的值了。执行时，arguments=[1,2,3]。

4.执行

实际需要执行的伪代码为：

b = 3;
c = 2;
返回值 = c + b + a;
return 返回值;

作用域链：

这里我们讨论一下执行时，如何判断变量合法（在作用域中）

例如b = 3，这是一个赋值操作，我们需要确定b这个变量我们有声明过，并找到它，这样才能给它赋值。这时就需要用到当前上下文的Scope对象了，我们取到
execute_context.Scope = [execute_context.Variable_Object, global_context.Variable_Object ]

这时，我们要找一个叫b的变量，首先找execute_context.Scope的数组第一项execute_context.Variable_Object，看看有没有，这里我们之间就找到了。

如果找变量a呢？我们发现execute_context.Variable_Object里面没有定义变量a，这时我们找execute_context.Scope的数组第二项，如果还没找到，以此类推，找完execute_context.Scope的所有值为止，这个时候，如果还没找到，我们就认为这个变量在作用域内未定义。
至于未定义后的处理：非严格模式下回再全局上下文的VO里面添加一个这个变量，严格模式则直接报错not defined。

当然，这里我们在第二项global_context.Variable_Object里面找到了变量a。它是一个全局变量。

因此：当前上下文的scope对象记录了由里到外注册(声明)的所有变量和函数，因此称为作用域链。

对于赋值操作b= 3; c = 2;，我们在当前上下文的VO中找到了它们，直接赋值即可：

execute_context: {
        Variable_Object: {
            b: 3,
            c: 2,
            arguments: [3] // 形参列表
        },
        Scope: [execute_context.Variable_Object, global_context.Variable_Object ],
        this: {}
}

对于c+ b + a，我们在当前上下文VO找到了c和b，在全局上下文找到了a，将三个数值相加，返回三个变量的和2 + 3 + 1 = 6。

5.执行上下文出栈

当前代码块执行完毕后，它对应的上下文就会出栈，也就更改了当前的上下文。
例如，函数fun1执行完毕后，它的上下文execute_context出栈，当前上下文变成了全局上下文global_context。
全局上下文出栈代表着所有代码运行完毕。

执行上下文出栈

三、全局上下文

我们继续运行全局上下文，之前运行到sum = fun1(3);，我们运行完毕了函数fun1(3)，并得到了结果6。
所以，这一句就变成了sum =6;的赋值语句，我们在全局上下文的VO找到了这个变量sum，直接给它赋值就好了：

global_context: {
    Variable_Object: {
        a: undefined,
        fun1：{
            函数 global_function1的地址,
            scope: [global_context.Variable_Object]
        },
        sum: 6
    },
    Scope: [global_context.Variable_Object],
    this: {}
}

此时，后面没有要执行的代码了，全局上下文出栈，结束代码运行。

参考文献：

教你步步为营掌握JavaScript闭包

一段javaScript代码的编译执行过程