解剖JS变量作用域的剖面图，轻松理解上下文与作用域链

在 JavaScript 的世界里，变量的作用域是一个经常被提及的概念，它决定了变量的可见性。了解作用域对于编写出健壮可靠的代码至关重要。本文将为你揭示 JavaScript 变量作用域的奥秘，帮助你轻松理解上下文、作用域链、变量提升等概念。

上下文

上下文是指 JavaScript 代码运行的环境，它决定了变量的可见性。在 JavaScript 中，存在两种主要上下文：全局上下文和局部上下文。

• 全局上下文：
  当脚本开始执行时，会创建一个全局上下文。全局上下文中的变量称为全局变量，它们在脚本的任何地方都可以访问。

• 局部上下文：
  函数被调用时，会创建一个局部上下文。局部上下文中的变量称为局部变量，它们只能在函数内部访问。

作用域

作用域是指变量的有效范围，它由变量的声明位置决定。在 JavaScript 中，作用域可以分为以下几种类型：

• 全局作用域：
  在全局上下文中声明的变量具有全局作用域，它们可以在脚本的任何地方访问。

• 局部作用域：
  在函数内部声明的变量具有局部作用域，它们只能在该函数内部访问。

• 块级作用域：
  在块级作用域（如 if 语句、for 循环、while 循环等）中声明的变量具有块级作用域，它们只能在该块级作用域内部访问。

作用域链

作用域链是 JavaScript 中一个重要的概念，它决定了变量的查找顺序。当 JavaScript 引擎试图访问一个变量时，它会沿着作用域链逐级向上查找，直到找到该变量的声明位置。

作用域链的形成过程如下：

1. 当前执行的函数的局部作用域。
2. 当前执行函数的父函数的局部作用域。
3. ...
4. 全局上下文。

变量提升

变量提升是 JavaScript 中一个有趣且容易混淆的概念。当 JavaScript 引擎解析代码时，它会将所有变量声明提升到函数或脚本的顶部。这意味着变量在声明之前就可以使用，但它们的值为 undefined。

变量提升的机制可以帮助我们理解一些看似奇怪的代码行为。例如，以下代码会输出什么？

console.log(x); // undefined
var x = 10;

答案是 undefined，因为变量 x 在声明之前就被提升到函数顶部，但此时它的值尚未被赋值。

总结

理解 JavaScript 变量的作用域是编写出健壮可靠的代码的关键。本文介绍了 JavaScript 中的作用域、上下文、作用域链和变量提升等概念，帮助你彻底理解变量在 JavaScript 中的行为。

现在，你已经掌握了 JavaScript 变量作用域的知识，快去探索 JavaScript 的更多奥秘吧！