JavaScript中的执行上下文和变量对象

摘要：以上简单总结了下对执行上下文和变量对象的理解，主要在于记录总结一下学习成果，目前文章的水平实在不敢谈分享。

文章同步到github javaScript中的执行上下文和变量对象

JavaScript代码执行的过程，包括编译和执行两个阶段，编译就是通过词法分析，构建抽象抽象语法树，并编译成机器识别的指令，在JavaScript代码编译阶段，作用域规则就已经确定了；在代码执行阶段，或者函数一旦调用，便会创建执行上下文(Execution Context)，也叫执行环境

在ECMA-262中有如下一段定义

当控制器转入 ECMA 脚本的可执行代码时，控制器会进入一个执行环境。当前活动的多个执行环境在逻辑上形成一个栈结构。该逻辑栈的最顶层的执行环境称为当前运行的执行环境。任何时候，当控制器从当前运行的执行环境相关的可执行代码转入与该执行环境无关的可执行代码时，会创建一个新的执行环境。新建的这个执行环境会推入栈中，成为当前运行的执行环境.

这也是一个抽象的概念，在一段JavaScript代码中，会创建多个执行上下文，执行上下文定义了变量或函数有权访问的其他数据, ,通过阅读规范及相关文档，了解到执行上下文(简称EC)主要包括三个点，用伪代码表示如下:

EC = {
    this: // 绑定this指向为当前执行上下文, 如果函数属于全局函数，则this指向window
    scopeChain: [] // 创建当前执行环境的作用域链,
    VO: {} // 当前环境的变量对象(Variable Object)，每个环境都有一个与之关联的变量对象
}

看下面这一段代码:

var a = 1;
function foo() {
    var b = 2;
    function bar() {
        console.log(b)
    }
    bar()
    console.log(a);
}

foo()

1.执行这段代码，首先会创建全局上下文globleEC，并推入执行上下文栈中；

2.当调用foo()时便会创建foo的上下文fooEC，并推入执行上下文栈中；

3.当调用bar()时便会创建bar的上下文barEC，并推入执行上下文栈中；

4.当bar函数执行完，barEC便会从执行上下文栈中弹出；

5.当foo函数执行完，fooEC便会从执行上下文栈中弹出；

6.在浏览器窗口关闭后，全局上下文globleEC便会从执行上下文栈中弹出；

总结: 栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文

再举一个例子结合浏览器开发者工具来看看到底什么执行上线文

function foo() {
    bar()
    console.log("foo")
}

function bar() {
    baz()
    console.log("bar")
}

function baz() {
    debugger  // 打断点观察执行上下文栈中的情况
}

可以看到当前baz正在执行，所以栈顶是baz的执行上下文，而栈底永远都是Global上下文

继续执行，baz函数执行完成后，从执行上下文栈顶弹出，继续执行bar函数内后面的代码，bar函数执行完，bar的执行上下文从栈中弹出；然后执行foo函数后面的代码，foo函数执行完后，从执行上下文从栈中弹出；最后全局上下文从执行上下文从栈中弹出，清空执行上下文从栈。

每一个执行环境都有一个与之关联的变量对象，是一个抽象的概念，环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它们。

当浏览器第一次加载js脚本程序的时候, 默认进入全局执行环境, 此次的全局环境变量对象为window, 在代码中可以访问。

如果环境是函数, 则将此活动对象做为当前上下文的变量对象(VO = AO), 此时变量对象是不可通过代码来访问的,下面主要对活动对象进行讲解。

当函数一调用，立刻创建当前上下文的活动对象, 并将活动对象作为变量对象，通过arguments属性初始化，值为arguments对象(传入的实参集合,与形参无关,形参做为局部环境的局部变量被定义)

AO = {
  arguments: 
};

arguments对象有以下属性:

length: 真正传递参数的个数;

callee: 指向当前函数的引用,也就是被调用的函数;

"类index": 字符串类型的整数, 值就是arguments对象中对象下标的值,arguments对象应和数组加以区别, 它就是arguments对象,只是能和数组具有相同的length属性,和可以通过下标来访问值

function show (a, b, c) {
    // 通过Object.prototype.toString.call()精准判断类型, 证明arguments不同于数组类型
    var arr = [1, 2, 3];
    console.log(Object.prototype.toString.call(arr)); // [object Array]

    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]

    console.log(arguments.length) // 2  传递进来实参的个数

    console.log(arguments.callee === show) // true 就是被调用的函数show自身

    //参数共享

    console.log(a === arguments[0]) // true

    a = 15;

    console.log(arguments[0]) // 15

    arguments[0] = 25;

    console.log(a)  // 25;

    但是，对于没有传进来的参数c, 和arguments的第三个索引是不共享的

    c = 25;

    console.log(arguments[2]) // undefined

    argument[2] = 35;

    console.log(c) // 25

}

show(10, 20);

接着往下走,这才是关键的地方,执行环境的代码被分成两个阶段来处理：

进入执行环境

执行函数的代码

函数如果被调用, 进入执行环境(上下文)，并立即创建活动对象, 通过arguments属性初始化, 与此同时会扫描执行环境中的所有形参、所有函数声明、所有变量声明, 添加到活动对象(AO)中, 并确定this的值，然后会开始执行代码。

在进入执行环境这个阶段:

所有形参声明:

形参名称作为活动对象属性被创建, 如果传递实参, 值就为实参值, 如果没有传递参数, 值就为undefined

所有函数声明:

函数名称作为活动对象的属性被创建，值是一个指针在内存中, 指向这个函数,如果变量对象已经存在相同名称的属性, 则完全替换。

所有变量声明:

所有变量名称作为活动对象的属性被创建, 值为undefined,但是和函数声明不同的是, 如果变量名称跟已经存在的属性(形式参数和函数)相同、则不会覆盖

function foo(a, b) {
    var c = 10;
    function d() {
        console.log("d");
    }
    var e = function () {
        console.log("e");
    };
    (function f() {})
    if (true) {
        var g = 20;
    } else {
        var h = 30;
    }
}

foo(10);

此时在进入foo函数执行上下文时,foo的活动对象fooAO为:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: undefined,
    d:   //指向d函数的指针,
    e: undefined,
    g: undefined,
    h: undefined  // 虽然else中的代码永远不会执行,但是h仍然是活动对象中的属性
}

这个例子做如下几点说明:

1.关于函数,只会创建函数声明作为活动对象的属性, 而f函数作为函数表达式并不会出现在活动对象(AO)中

2.e虽然值是一个函数, 但是作为变量属性被活动对象创建

在进入执行上下文阶段，活动对象拥有了属性，但是很多属性值为undefined, 到代码执行阶段就开始为这些属性赋值了

还是上面的代码例子, 此时活动对象如下:

fooAO = {
    arguments: {
        0: 10,
        length: 1
    },
    a: 10,
    b: undefined,
    c: 10, // 赋值为undefined
    d:   //指向d函数的指针,
    e:   // 指向e函数的指针
    g: 20,
    h: undefined  // 声明h变量,但是没有赋值
}

变量对象包括:{ arguments对象+函数形参+内部变量＋函数声明(但不包含表达式) }

这时这个活动对象, 即作为当前执行环境的变量对象会被推到此执行环境作用域链的最前端(作用域链本篇不做介绍，会在下一篇文章中多带带讲解作用域和作用域链), 假定执行环境为一个对象,则整个执行环境可以访问到的属性如下:

伪代码如下:

fooExecutionContext = {
    scopeChain: [], //fooAO +所有父执行环境的活动对象,
    fooAO: {
        arguments: {
            0: 10,
            length: 1
        },
        a: 10,
        b: undefined,
        c: 10, // 赋值为undefined
        d:   //指向d函数的指针,
        e:   // 指向e函数的指针
        g: 20,
        h: undefined
    },
    this: 当前执行环境的上下文指针
}

补充:

下面的例子为了说明一下变量声明的顺序及变量同名不会影响函数声明

console.log(foo); //  foo的函数体
var foo = 10;
console.log(foo) // 10
function foo() {};
foo = 20;
console.log(foo); // 20

在代码执行之前, 就会读取函数声明,变量声明的顺序在函数声明和形参声明之后, 整个流程如下:

1. 进入执行环境阶段:

1. var VO = {}
2. VO[foo] = "foo函数指针"
3. 扫描到var foo = 10，

 // 但是foo做为function已经声明，所以变量声明不会影响同名的函数声明，如果代码中没有foo函数声明的话,则foo为undefined

代码执行阶段:

1. VO[foo] = 10;
2. VO[foo] = 20;

解析代码完成。

以上简单总结了下对执行上下文和变量对象的理解，主要在于记录总结一下学习成果，目前文章的水平实在不敢谈分享。如有理解不对的地方还请各位大神多多指教,想了解更深可以去查看本文最后主要参考资料的链接，都是经典啊，相信看完也就理解了。

本文主要参考资料:

JavaScript高级程序设计（第3版）
ECMAScript5.1中文版--执行环境
前端基础进阶（二）：执行上下文详细图解
前端基础进阶（三）：变量对象详解
深入理解JavaScript系列（11）：执行上下文（Execution Contexts）
深入理解JavaScript系列（12）：变量对象（Variable Object）