前情提要

各位好，今天学习了一篇非常有意思的文章，特地来做一篇学习笔记！

很多人都知道 JavaScript 有变量提升，有人说 var 会有变量提升但 let 不会。有人说不对，let 不是不提升，而是会形成暂时性死区，在被显式赋值之前读写变量都会导致 ReferenceError 的报错。

但 JavaScript 为什么会变量提升呢？今天就带你了解一下。

本文参考：《JavaScript深入之变量对象》

关于变量对象

当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。

对于每个执行上下文，都有三个重要属性：

变量对象(Variable object，VO)
作用域链(Scope chain)
this

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

因为不同执行上下文下的变量对象稍有不同，所以我们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。

全局上下文

全局对象，也就是 Window 对象大家都很熟悉，这里就不再赘述了。

在顶层 JavaScript 代码中，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询，同时也意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。

举个例子：

// 都能生效
console.log(Math.random());
console.log(this.Math.random());

// 相当于 Window.a = 1 
var a = 1;
console.log(this.a);

上面例子说明了，全局上下文中的变量对象就是全局对象。

函数上下文

和全局上下文不同是，当我们执行函数时，会形成函数上下文。在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object 呐，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

执行过程

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

进入执行上下文

在这个阶段中，执行上下文会分别创建变量对象，建立作用域链，以及确定this的指向。
代码执行

创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

进入执行上下文

当进入执行上下文时，这时候还没有执行代码（重点！！！），浏览器会对函数进行分析，然后创建一个变量对象，用来描述这个函数。

变量对象会包括：

函数的所有形参 (如果是函数上下文)
- 由名称和对应值组成的一个变量对象的属性被创建
- 没有实参，属性值设为 undefined
函数声明
- 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
- 如果变量对象已经存在相同名称的属性，则完全替换这个属性
变量声明
- 由名称和对应值（undefined）组成一个变量对象的属性被创建；
- 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

在进入执行上下文后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

还是上面的例子，当代码执行完后，这时候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

到这里变量对象的创建过程就介绍完了，让我们简洁的总结我们上述所说：

全局上下文的变量对象初始化是全局对象
函数上下文的变量对象初始化只包括 Arguments 对象
在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
在代码执行阶段，会再次修改变量对象的属性值

关于 let/const

在学习完变量对象和函数上下文的概念之后，我们更容易理解 let/const 的暂时性死区概念。

let/const 声明的变量，仍然会提前被收集到变量对象中，但和 var 不同的是， let/const 定义的变量，不会再这个时候给它赋值undefined。

因为没有赋值，所以即使变量声明提前了，我们也不能再赋值之前调用他，这就是我们常说的暂时性死区。

知道变量提升，但是why？