context

context执行上下文

概念

当前代码的运行环境或者作用域

js中代码的运行环境分为以下三种：

全局级别的代码-这个是默认的代码运行环境，一旦代码被载入，引擎最先进入的就是这个环境。
函数级别的代码-当执行一个函数时，运行函数体中的代码
Eval的代码-在Eval函数内运行的代码。

执行上下文堆栈

在浏览器中，js引擎的工作方式是单线程的。也就是说，某一时刻只有唯一的一个事件是被激活处理的，其他的事件被放入队列中，等待被处理。

eg:

(function foo(i) {
           if (i === 3) {
               return;
           }
           else {
               foo(++i);
           }
       }(0));

由此可见 ，对于执行上下文这个抽象的概念，可以归纳为以下几点：

单线程
同步执行
唯一的一个全局上下文
函数的执行上下文的个数没有限制
每次某个函数被调用，就会有个新的执行上下文为其创建，即使是调用的自身函数，也是如此。

执行上下文的建立过程

我们现在已经知道，每当调用一个函数时，一个新的执行上下文就会被创建出来。然而，在javascript引擎内部，这个上下文的创建过程具体分为两个阶段:

建立阶段(发生在当调用一个函数时，但是在执行函数体内的具体代码以前)
建立变量，函数，arguments对象，参数
建立作用域链
确定this的值
代码执行阶段:
变量赋值，函数引用，执行其它代码

function foo(i) {
            var a = 'hello';
            var b = function privateB() {
        
            };
            function c() {
        
            }
        }
        
        foo(22);

建立阶段

fooExecutionContext = {
            variableObject: {
                arguments: {
                    0: 22,
                    length: 1
                },
                i: 22,
                c: pointer to function c()
                a: undefined,
                b: undefined
            },
            scopeChain: { ... },
            this: { ... }
        }

执行阶段

fooExecutionContext = {
            variableObject: {
                arguments: {
                    0: 22,
                    length: 1
                },
                i: 22,
                c: pointer to function c()
                a: 'hello',
                b: pointer to function privateB()
            },
            scopeChain: { ... },
            this: { ... }
        }

我们看到，只有在代码执行阶段，变量属性才会被赋予具体的值。

局部变量作用域提升

在函数中声明的变量以及函数，其作用域提升到函数顶部

eg:

(function() {
           console.log(typeof foo); // function pointer
           console.log(typeof bar); // undefined
       
           var foo = 'hello',
               bar = function() {
                   return 'world';
               };
       
           function foo() {
               return 'hello';
           }
       
       }());​