详解js执行环境——声明提升的本质

(function() {
    console.log(typeof foo); // 这里会打印出什么？
    console.log(typeof bar); // 这里会打印出什么？
    var foo = 'hello',
        bar = function() {
            return 'vian';
        };
    function foo() {
        return 'hello';
    }
})();

我们在接触JavaScript这门语言时，会经常遇到这种问题，经过后续的学习，我们可能知道了这种现象在JavaScript中叫声明提升(hoisting)，但是我们可能只知道声明提升的现象，却不清楚造成这种现象的本质，而这个本质却是JavaScript最为重要的知识之一。解答上述代码中的问题之前，我们先看一下JavaScript中的执行环境。

执行环境（执行上下文）

执行环境（execution context)定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

在JavaScript中可执行代码可以分为三类:

全局代码 - JavaScript 代码开始运行的默认环境，即全局的、不在任何函数里面的代码
函数代码 - 函数体内的代码
eval代码 - eval(...)函数中动态执行的代码（我们这里不讨论）

全局执行环境是最外围的一个执行环境。在Web浏览器中，全局执行环境是window对象。当代码载入浏览器时，全局执行环境被创建，直到网页或浏览器被关闭，全局执行环境才被销毁。在一个Javascript程序中，必须且只能存在一个全局执行环境，和任意个的非全局执行环境，程序每调用一个函数，都会创建新的执行环境，如下图所示。

该JavaScript程序中含有一个全局执行环境、三个函数执行环境。为以正确的顺序执行代码，JavaScript中用堆栈的形式来处理执行环境——执行环境栈（Execution Context Stack）。

执行环境栈

浏览器中JavaScript是单线程的，这意味着运行在浏览器中的JavaScript代码，同一时间只有一件事件、动作发生。除了当前正在运行的代码，其他代码都在一个队列中排队，这个队列就是执行环境栈。为了更好的说明执行环境栈，我们结合一个例子来说明:

(function test(i) {
    if (i === 1) {
        return;
    }
    test(++i);
})(0);

下面我们用图来表示上述代码执行时，执行环境栈中的变化过程：

当JavaScript代码执行时，第一个创建的总是全局执行环境，因此全局执行环境也总是在执行环境栈的最底部。
代码执行时，调用了函数test(0)，此时创建新的执行环境test EC，并压入执行栈。
在执行第一次执行函数test(i)时(i=0)，执行到函数体中的代码test(++i)，程序再一次调用函数test(i)，创建新的执行环境test EC1，并压入执行栈。
函数test(i = 1)中的代码执行完毕，该执行环境出栈销毁，程序回到上一层执行环境中继续执行。

5.函数test(i = 0)中的代码执行完毕，该执行环境出栈销毁，程序回到全局执行环境中继续执行，全局环境的代码即使执行完毕，也不会销毁，直至网页或浏览器被关闭了才出栈销毁。

上面就是程序执行过程中，执行环境栈的变成过程。关于执行环境栈，有以下几点要特别注意：

单线程
同步执行
只有一个全局执行环境
可以有无数个的非全局执行环境
每一次函数调用都会创建一个新的执行环境，即使是调用自身

详解执行环境

从上文我们已经知道了，每当一个函数被调用时，一个新的执行环境就会被创建。实际上，执行环境可以分为两个阶段，创建阶段和执行阶段。JavaScript声明提升的秘密也在其中，我们继续往下看。

创建阶段 (函数被调用，同时在执行函数内的代码前) 在这个阶段会发生以下的事: 创建变量对象(VO，Variable Object) 建立作用域链(Scope Chain) 确定this的指向
执行阶段在这个阶段进行赋值、函数引用、执行代码。

我们完全可以把执行环境当作一个含有三个属性的对象，如下：

executionContextObj = {
    'variableObject': {...}, //函数的arguments、参数、函数内的变量及函数声明
    'scopeChian': {...}, //本层变量对象及所有上层执行环境的变量对象
    'this': {}
}

声明提升的秘密就发生在变量对象VO中。

变量对象/活动对象(VO/AO)

每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

说到执行环境的创建过程就会涉及到变量对象和活动对象，很多人对这两个概念会模糊不清。其实，变量对象VO和活动对象AO是同一个对象在不同阶段的表现形式。当进入执行环境的创捷阶段时，变量对象被创建，这时变量对象的属性无法被访问。进入执行阶段后，变量对象被激活变成活动对象，此时活动对象的属性可以被访问。 下面来看一下，执行环境创建阶段中变量对象创建中，JavaScript解析器做的事情：

根据函数参数，创建并初始化arguments对象，及形参属性
检查上下文中的函数声明，将函数名作为变量对象的属性，函数引用作为值。如果该函数名在变量对象中已存在，则覆盖已存在的函数引用。
检查上下文的变量声明，将变量名作为变量对象的属性，值设置为undefined。如果该变量名在变量对象中已存在，为防止与函数名冲突，则跳过，不进行任何操作。

JavaScript中声明提升的背后原因已经很清晰了，你发现了吗？请先思考一下，我们下文将结合例子进行讲解。先让我们结合一段代码，结合上文的知识，回顾一下代码执行时，会发生什么事情。

function greet(name) {
    var say = 'hello';
    function action() {
        console.log(say + name);
    }
    action();
}
greet('vian');

进入全局执行环境，执行代码。(JavaScript代码执行时，第一个进入的总是全局执行环境)
调用函数greet(...)，执行函数内的任何代码前，创建执行环境。
进入创建阶段：
- 创建变量对象：
  - 检查函数参数创建arguments对象，及设置函数形参。此时：
```
executionContextObj = {
       arguments: {0: 'vian', length: 1},
       name: 'vian'
}
```
  - 扫描函数声明，设置函数名为变量对象的属性，函数引用为属性值，遇到同名属性则覆盖函数引用值。此时：
```
executionContextObj = {
       arguments: {0: 'vian', length: 1},
       name: 'vian',
       action: <action>
}
```
  - 扫描变量声明，设置变量名为变量对象的属性，undefined为属性值，为遇到同名属性则跳过。此时：
```
executionContextObj = {
       arguments: {0: 'vian', length: 1},
       name: 'vian',
       action: <action>,
       say: undefined
}
```
- 初始化作用域链
- 确定this指向
进入执行阶段，执行代码。变量对象变成活动对象，遇到查找变量和函数引用的时候，先去活动对象中找，找不到的情况下沿作用域链往上找。直至找到为止，否则为undefined。
函数内的代码执行完毕，该函数执行环境出栈销毁，程序执行流回到全局执行环境..

再看声明提升

通过对JavaScript中执行环境的了解，令人奇怪的声明提升机制也变得清晰明了。回到本文的开头，造成这种声明提升现象的本质，究竟是什么呢？——执行环境的创建阶段，变量对象创建的方式所造成。下面我们来解释一下本文开头的代码。

(function() {
    console.log(typeof foo); // 这里会打印出什么？
    console.log(typeof bar); // 这里会打印出什么？
    var foo = 'hello',
        bar = function() {
            return 'vian';
        };
    function foo() {
        return 'hello';
    }
})();

根据上文中分析变量对象创建过程的方法：

executionContextObj = {}
1.初始化arguments对象，及形参
executionContextObj = {
    arguments: {length: 0}
}
2.扫描函数声明，并进行处理：
遇到函数声明 function foo(){}
executionContextObj中没有foo属性，将foo设为executionContextObj的属性，函数引用作为值。
executionContextObj = {
    arguments: {length: 0},
    foo: <function>
}
3.扫描变量声明，并进行处理：
遇到变量声明var foo，executionContextObj已存在foo属性，跳过。
遇到变量声明var bar，executionContextObj不存在bar属性，将其设置为变量对象属性，值为undefined。
executionContextObj = {
    arguments: {length: 0},
    foo: <function>,
    bar: undefined
}

结论：

    console.log(typeof foo); // 'function'
    console.log(typeof bar); // 'undefined'

到这里，我们就再也不怕声明提升的坑和问题啦。需要注意的是，es6中新增的let和const变量声明都不会进行变量提升，重复赋值及声明前引用变量都会报错(TDZ)。

let const问题

var name = 'vian';
if (1) {
    name = 'em';  //TDZ开始  ReferenceError: Cannot access 'name' before initialization
    let name;     //TDZ结束  name值不会被'em'覆盖，因为块级作用域中使用了let声明name，此时name
                  //绑定在了块级作用域中，且不受外部影响。
   
}

到了ES6，使用新增的let、const关键字声明的变量，不会按照上文的规则进行变量提升。ES6明确规定，如果区块中存在let和const关键字，区块对这些这些声明的变量，从一开始就形成一个封闭的作用域，这些变量不再受外部的影响(可理解为这些变量绑定在区块上)。在声明之前使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ)

希望本文对大家有所帮助，互相学习，一起提高。转载请注明原帖。