JavaScript执行机制深层剖析

1. JS引擎创建一个全局对象（Global Object)

这个对象全局只存在一份，它的属性在任何地方都可以访问，它的存在伴随着应用程序的整个生命周期。全局对象在创建时，将Math,String,Date,document 等常用的JS对象作为其属性。由于这个全局对象不能通过名字直接访问，因此还有另外一个属性window,并将window指向了自身，这样就可以通过window访问这个全局对象了。用伪代码模拟全局对象的大体结构如下：

上图中的羽毛球1一定是先放入栈中，然后是羽毛球2，以此类推，而出栈时，一定是羽毛球5先拿出来，然后是羽毛球4，以此类推，这种方式和栈存取数据的方式如出一辙。

• 堆 堆数据类型类似与书架。书虽然也整齐的存放在书架上，但是我们只要知道书的名字，我们就可以很方便的取出我们想要的书。

好了好了，扯远了。我们接着往下说，在这只需知道执行环境栈是怎样存取数据的就行。

3. 创建全局执行上下文（Execution Context）

到这你可能会问，上下文是个啥玩意？

是啊，上下文是个什么鬼啊？

上下文不是玩意，也不是什么鬼。

执行上下文可以理解为当前代码的执行环境。JS所有代码都会在自己的上下文环境下运行。

说到上下文，你可能会有这样的疑惑：上下文不就是作用域吗？

老铁，我肯定的告诉你，上下文不是作用域。的确，在JS里，这还真是个很难区分的东东。不过现在我还不能马上道出他们的区别，因为作用域的知识，我们还没有涉及，彻底搞懂JavaScript作用域，通过这篇文章，你将彻彻底底了解关于作用域的一切。

那在JS中会有几种执行环境呢？

大概有3种：

• 全局环境：JavaScript代码运行起来会首先进入该环境
• 函数环境：当函数被调用执行时，会进入当前函数中执行代码
• eval、with（不建议使用，可忽略）

因此在一个JavaScript程序中，必定会产生多个执行上下文。

go on...

4. 全局上下文推入执行环境栈底

5. 代码开始从上往下执行，这里我们暂且不谈标识符处理，当代码执行到bar(),生成bar执行上下文，推入栈中

6. 代码执行到foo(),生成foo执行上下文，推入栈中

7. foo()执行完，foo执行上下文出栈

8. bar()执行完，bar执行上下文出栈

9. 全局上下文执行上下文出栈

我们用图走一下js执行流程，是这样的：

function foo() {
    console.log(a);
    console.log(baz);

    var a = 'inner';
    var baz = 1;

    function baz() {}
}

foo();

第一处是undefined，第二处是[Function: baz]，是不是很简单？

下面我用代码简单模拟下上面的过程

function foo() {
    function baz() {}

    var a = undefined;

    console.log(a);
    a = 'inner';

    console.log(baz);
}

foo();

VO(foo) = {
     arguments: {},
     baz: <foo reference>,  // 表示foo的地址引用
     a: undefined
 }

var a = 1;
function foo() {
    function baz() {
        console.log( a ); 
    }

    baz();
}

foo(); // 1

EC(foo) = {
    VO(foo): {...}, //省略
    ScopeChain: [VO(foo), window],
    this: 
}

EC(baz) = {
    VO(baz): {...}, //省略
    ScopeChain: [VO(baz), VO(foo), window],
    this: 
}

EC(global) = {
    VO: window,
    ScopeChain: {},
    this: window
}