面试题：JavaScript提升机制与块级作用域综合分析

Question

考虑以下代码： ```javascript function outer() { let x = 1; if (true) { let x = 2; console.log(x); } console.log(x); } outer(); // 接着修改代码如下： function outer2() { var y = 1; if (true) { var y = 2; console.log(y); } console.log(y); } outer2(); 请分别说明两段代码的输出，并详细阐述变量提升和块级作用域在其中的表现。

Answer 1

1. 第一段代码outer函数的输出及分析：

   • 输出：
     • 首先输出2。
     • 然后输出1。
   • 分析：
     • 在outer函数中，使用let声明变量。let具有块级作用域。在if (true)代码块中，let x = 2;创建了一个新的块级作用域变量x，这个变量仅在该代码块内有效。所以console.log(x);在这个块内输出2。
     • 而函数外层的let x = 1;与块内的x是不同的变量（因为块级作用域的隔离）。所以在块外的console.log(x);输出的是外层声明的x的值1。let不存在变量提升，在声明之前访问会导致ReferenceError。

2. 第二段代码outer2函数的输出及分析：

   • 输出：
     • 首先输出2。
     • 然后输出2。
   • 分析：
     • 在outer2函数中，使用var声明变量。var没有块级作用域，只有函数作用域。var y = 2;虽然写在if块内，但由于var的特性，它实际上提升到了函数的顶部（变量提升）。所以在if块内和块外访问的y是同一个变量。
     • 变量提升使得var y在函数开始时就被声明，但是赋值语句y = 1;和y = 2;还是在它们原本的位置执行。先执行y = 1;，然后在if块内执行y = 2;，所以两个console.log(y);都输出2。