最近在和同事闲聊var和let的区别时，我被嘲笑了，起因是我提出了var具有变量提升的特性而let没有的观点。在我看来这不是最常刷到的面试题吗？但是在一番仔细研究之后我发现事情并不是我想象的这样，即let同样存在变量提升，只是let存在暂时性死区。

变量提升

证明var声明存在变量提升

通常我们是这样子来证明var存在变量提升的。

function fn(){

    console.log(a) // undefined

    var a = 12

}

fn()

为什么这段代码会输出undefined，而不是报错呢？

原因就是js在创建执行上下文时，会检查代码，找出变量声明和函数声明，并将函数声明完全存储在环境中，而将通过var声明的变量设定为undefined，这就是所谓的变量提升。从字面上理解就是变量和函数声明会被移动到函数或者全局代码的开头位置。

那么当我们将var替换为let时，结果又会如何？

function fn(){

    console.log(a) // Uncaught ReferenceError: a is not defined

    let a = 12

}

fn()

意料之中，代码报错了。很多人通过这个反例，便认为let没有变量提升，但其实这是错误的。上面举的例子只能证明，var存在变量提升，但是并不能证明let不存在变量提升。

证明let声明存在变量提升

我们再举一个例子：

var x = 'parent value';

(function() {

  console.log(x); // parent value

}())

想不到吧！此时的代码又会报错了，从这里其实可以看出let也是存在变量提升的，知识在变量显式赋值之前不能对变量进行读写，否则就会报错，这也就是所谓的let和const的暂时性死区。

暂时性死区（Temporal Dead Zone ）

引用MDN上的定义

let bindings are created at the top of the (block) scope containing the declaration, commonly referred to as “hoisting”. Unlike variables declared with var, which will start with the value undefined, let variables are not initialized until their definition is evaluated. Accessing the variable before the initialization results in a ReferenceError. The variable is in a “temporal dead zone” from the start of the block until the initialization is processed.

大概意思便是let同样存在变量提示（hoisting），只是形式与var不同，var定义的变量将会被赋予undefined的初始值，而let在被显式赋值之前不会被赋予初始值，并且在赋值之前读写变量都会导致 ReferenceError 的报错。从代码块(block)起始到变量求值(包括赋值)以前的这块区域，称为该变量的暂时性死区。

var x = 'parent value';

(function() {

  // let x 此时暂时性死区开始

  console.log(x); // Uncaught ReferenceError: x is not defined

  //暂时性死区结束

  let x = 'child value' 

}())

作者：37.2℃同志
链接：https://juejin.cn/post/6983702070293430303
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。