深入理解JS：var、let、const的异同 (2)

上述过程就是我们所谓的“变量提升”，这也就能解释为什么变量可以在声明之前使用，因为使用是在执行阶段，而在此之前的创建阶段就已经将声明的变量添加到了变量对象中，所以执行阶段通过标识符可以在变量对象中查找到，也就不会报错。

示例代码：

console.log(a) // undefined var a = 1; console.log(a) // 1

let 声明变量存在暂存死区，如何理解暂存死区呢？

其实 let 也存在与 var 类似的“变量提升”过程，但与 var 不同的是其在执行上下文的创建阶段，只会创建变量而不会被初始化（undefined），并且 ES6 规定了其初始化过程是在执行上下文的执行阶段（即直到它们的定义被执行时才初始化），使用未被初始化的变量将会报错。

let and const declarations define variables that are scoped to ’s . The variables are created when their containing is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated. A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer’s AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created. If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.

在变量初始化前访问该变量会导致 ReferenceError，因此从进入作用域创建变量，到变量开始可被访问的一段时间（过程），就称为暂存死区(Temporal Dead Zone)。

示例代码 1：

console.log(bar); // undefined console.log(foo); // ReferenceError: foo is not defined var bar = 1; let foo = 2;

示例代码 2：

var foo = 33; { let foo = (foo + 55); // ReferenceError: foo is not defined }

注：首先，需要分清变量的创建、初始化、赋值是三个不同的过程。另外，从 ES5 开始用词法环境（Lexical Environment）替代了 ES3 中的变量对象（Variable object）来管理静态作用域，但作用是相同的。为了方便理解，上述讲解中仍保留使用变量对象来进行描述。

小结

var 声明的变量在执行上下文创建阶段就会被「创建」和「初始化」，因此对于执行阶段来说，可以在声明之前使用。

let 声明的变量在执行上下文创建阶段只会被「创建」而不会被「初始化」，因此对于执行阶段来说，如果在其定义执行前使用，相当于使用了未被初始化的变量，会报错。

3.let 与 const 异同

const 与 let 很类似，都具有上面提到的 let 的特性，唯一区别就在于 const 声明的是一个只读变量，声明之后不允许改变其值。因此，const 一旦声明必须初始化，否则会报错。

示例代码：

let a; const b = "constant" a = "variable" b = 'change' // TypeError: Assignment to constant variable

如何理解声明之后不允许改变其值？

其实 const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动（即栈内存在的值和地址）。

JavaScript 的数据类型分为两类：原始值类型和对象（Object类型）。

对于原始值类型（undefined、null、true/false、number、string），值就保存在变量指向的那个内存地址（在栈中），因此 const 声明的原始值类型变量等同于常量。

对于对象类型（object，array，function等），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是不可修改的，至于指针指向的数据结构是无法保证其不能被修改的（在堆中）。

示例代码：

const obj = { value: 1 } obj.value = 2 console.log(obj) // { value: 2 } obj = {} // TypeError: Assignment to constant variable

4.参考

深入理解JavaScript系列（12）：变量对象（Variable Object）

ES6 let 与 const

详解ES6暂存死区TDZ

嗨，你知道 let 和 const 吗？