面试题：JavaScript 块级作用域与变量提升的关系

Question

ES6 引入了块级作用域（如 `let` 和 `const`），请详细阐述块级作用域如何影响变量提升，以及与 `var` 声明变量提升的不同之处，结合实际代码示例分析。

Answer 1

变量提升概述

变量提升是指在 JavaScript 代码执行前，变量和函数声明会被移动到其所在作用域的顶部。但这并不意味着它们的赋值也被提升，仅仅是声明被提升。

var 声明的变量提升

1. 特性：var 声明的变量存在函数作用域，会被提升到函数作用域的顶部，但赋值操作不会提升。
2. 示例：

function varHoisting() {
    console.log(x); // 输出: undefined
    var x = 10;
}
varHoisting();

在上述代码中，var x 声明被提升到函数顶部，但 x = 10 赋值操作并未提升，所以 console.log(x) 输出 undefined。

块级作用域与 let 和 const 的变量提升

1. 特性：let 和 const 声明的变量具有块级作用域，虽然也存在变量提升，但它们被提升到块级作用域的顶部，并且处于“暂时性死区”状态。在变量声明之前访问该变量，会抛出 ReferenceError。
2. 示例：

function letHoisting() {
    console.log(y); // 报错: ReferenceError: y is not defined
    let y = 20;
}
letHoisting();

这里 let y 声明被提升到块级作用域顶部，但由于处于暂时性死区，在声明语句之前访问 y 就会报错。

不同之处总结

1. 作用域：var 是函数作用域，let 和 const 是块级作用域。
2. 提升表现：var 声明提升后，在声明前访问变量得到 undefined；let 和 const 声明提升后，在声明前访问变量会报错，因为处于暂时性死区。
3. 重复声明：var 允许在同一作用域重复声明同一个变量；let 和 const 不允许在同一作用域重复声明同一个变量。例如：

var a = 1;
var a = 2; // 不报错

let b = 3;
let b = 4; // 报错: Identifier 'b' has already been declared

块级作用域的引入，通过 let 和 const 的特性，使得变量作用域更符合预期，减少了变量提升带来的一些意外行为，提高了代码的可维护性和可靠性。