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

旧城等待， 2022-10-01 05:45 143阅读 0赞

我们在接触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);
    复制代码

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

1.  当JavaScript代码执行时，第一个创建的总是全局执行环境，因此全局执行环境也总是在执行环境栈的最底部。
2.  代码执行时，调用了函数test(0)，此时创建新的执行环境test EC，并压入执行栈。
3.  在执行第一次执行函数test(i)时(i=0)，执行到函数体中的代码test(++i)，程序再一次调用函数test(i)，创建新的执行环境test EC1，并压入执行栈。
4.  函数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');
    复制代码

1.  进入全局执行环境，执行代码。(JavaScript代码执行时，第一个进入的总是全局执行环境)
2.  调用函数greet(...)，执行函数内的任何代码前，创建执行环境。
3.  进入创建阶段：
    
     *  创建变量对象：
        
         *  检查函数参数创建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指向
4.  进入执行阶段，执行代码。变量对象变成活动对象，遇到查找变量和函数引用的时候，先去活动对象中找，找不到的情况下沿作用域链往上找。直至找到为止，否则为undefined。
5.  函数内的代码执行完毕，该函数执行环境出栈销毁，程序执行流回到全局执行环境..

### 再看声明提升 ###

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

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

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)

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

转载于:https://juejin.im/post/5cc952f351882541e94d8994