揭秘 JavaScript 块级作用域的奥秘：代码解读与原理剖析

引言：一段匪夷所思的代码

在掘金上看到两段奇怪的 JavaScript 代码，它们打印的结果令人费解。为了解开这个谜团，我决定对这两段代码进行详细的解析，并分享我的发现。

代码一：变量提升与作用域提升的舞曲

var a = 10;
function foo() {
  console.log(a); // undefined
  var a = 20;
  console.log(a); // 20
}
foo();

代码解析：

这段代码看似简单，却暗藏玄机。当我们执行这段代码时，控制台会输出两个值：

• undefined
• 20

为什么会出现这样的结果？为了理解这个问题，我们需要深入了解变量提升和作用域提升的概念。

变量提升：

在 JavaScript 中，变量提升是一种特殊的机制，它会在执行代码之前将所有变量声明提升到函数或脚本的顶部。也就是说，无论变量是在函数内部还是外部声明，都会被提升到函数或脚本的顶部。

作用域提升：

作用域提升与变量提升类似，它会将函数声明提升到函数或脚本的顶部。也就是说，无论函数是在函数内部还是外部声明，都会被提升到函数或脚本的顶部。

结合变量提升和作用域提升，我们就可以理解这段代码的运行结果了：

1. 首先，变量 a 被提升到 foo() 函数的顶部。
2. 然后，foo() 函数被执行，控制台输出 undefined。这是因为在执行 a = 20 语句之前，变量 a 的值还是 undefined。
3. 最后，a = 20 语句执行，将变量 a 的值更改为 20。控制台输出 20。

代码二：块级作用域的魅力

let a = 10;
{
  let a = 20;
  console.log(a); // 20
}
console.log(a); // 10

代码解析：

这段代码更加简洁，但它同样包含了丰富的知识点。当我们执行这段代码时，控制台会输出两个值：

• 20
• 10

这段代码之所以输出这样的结果，是因为它使用了块级作用域。

块级作用域：

块级作用域是一种新的作用域类型，它于 ES6 中引入。块级作用域只存在于花括号 {} 之内，并且它可以嵌套。这意味着，在块级作用域内声明的变量只在这个块级作用域内有效，而不能在其他作用域内访问。

结合块级作用域，我们就可以理解这段代码的运行结果了：

1. 首先，变量 a 被声明为全局变量，并初始化为 10。
2. 然后，执行花括号 {} 代码块。在代码块内，又声明了一个变量 a，并初始化为 20。由于块级作用域的存在，这个变量 a 只在这个代码块内有效。
3. 控制台输出 20，这是因为在代码块内，变量 a 的值为 20。
4. 代码块执行完毕，控制台输出 10，这是因为在全局作用域内，变量 a 的值还是 10。

结语

通过对这两段代码的解析，我们对 JavaScript 块级作用域有了更加深入的理解。块级作用域是一个非常重要的概念，它可以帮助我们编写更加结构化和可维护的代码。

如果您对 JavaScript 块级作用域还有其他疑问，欢迎在评论区留言。