JavaScript - 变量作用域

你好，未来的JavaScript魔法师们！今天，我们将踏上一段激动人心的旅程，探索变量作用域的奥秘。如果你是编程新手，不用担心——我会成为你的友好向导，我们将一起一步步探索这个概念。所以，拿起你的虚拟魔杖（键盘），让我们开始吧！

JavaScript 变量作用域

变量作用域就像是你的变量可以玩耍的游乐场。它决定了在代码的哪个部分变量是可见的并且可以被使用。把它想象成变量的“可见范围”。让我们从一个简单的例子开始：

let globalVar = "我无处不在！";

function sayHello() {
console.log(globalVar);
let localVar = "我只在这个函数内部可见！";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // 这行代码可以正常工作
console.log(localVar);   // 这行代码将导致错误

在这个例子中，globalVar就像是学校里受欢迎的孩子——每个人都知道他们，并且可以和他们交谈。但localVar更像是在艺术课（我们的sayHello函数）上才出来的害羞孩子。

JavaScript 块作用域

现在，让我们来谈谈块作用域。在JavaScript中，一个块由大括号{}定义。用let和const声明的变量是块作用域的，这意味着它们只在它们声明的块内部可见。

if (true) {
let blockScopedVar = "我只在这个块内可见！";
console.log(blockScopedVar);  // 这行代码可以正常工作
}

console.log(blockScopedVar);  // 这行代码将导致错误

把块作用域想象成一个秘密俱乐部。只有俱乐部内部的孩子（变量）才知道秘密握手（可以访问变量）。

JavaScript 函数作用域

函数作用域就像是变量的私人房间。在函数内部声明的任何变量都只能在那个函数内部访问。让我们看一个例子：

function outer() {
let outerVar = "我在外部函数中！";

function inner() {
let innerVar = "我在内部函数中！";
console.log(outerVar);  // 这行代码可以正常工作
console.log(innerVar);  // 这行代码可以正常工作
}

inner();
console.log(outerVar);  // 这行代码可以正常工作
console.log(innerVar);  // 这行代码将导致错误
}

outer();

在这里，outerVar就像是父母，可以窥视孩子的房间（inner函数），但孩子的玩具（innerVar）留在孩子的房间内。

JavaScript 局部作用域

局部作用域指的是仅在代码的特定部分可访问的变量。这可以是函数内部（函数作用域）或块内部（块作用域）。让我们看一个更复杂的例子：

let globalVar = "我是全局的！";

function outerFunction() {
let outerVar = "我来自外部函数！";

if (true) {
let blockVar = "我来自块！";
var functionVar = "我在整个函数内可见！";

console.log(globalVar);    // 可以工作
console.log(outerVar);     // 可以工作
console.log(blockVar);     // 可以工作
console.log(functionVar);  // 可以工作
}

console.log(globalVar);    // 可以工作
console.log(outerVar);     // 可以工作
console.log(functionVar);  // 可以工作
console.log(blockVar);     // 错误！
}

outerFunction();
console.log(globalVar);    // 可以工作
console.log(outerVar);     // 错误！
console.log(functionVar);  // 错误！
console.log(blockVar);     // 错误！

这个例子就像是大家庭聚会。globalVar是每个人都知道的祖父母。outerVar就像是父母，在outerFunction家族中为人所知。blockVar是只在某个房间（if块）出现的害羞表亲。用var声明的functionVar是每个人都可以听到的喧闹叔叔。

现在，让我们总结一下不同类型的变量声明及其作用域：

声明	作用域	变量提升	可以重新赋值
var	函数	是	是
let	块	否	是
const	块	否	否

记住，var是老派的酷孩子，可能有些不可预测。let和const是新的孩子，他们遵循更严格的规则。

理解变量作用域在JavaScript中至关重要。它帮助你写出更干净、更高效的代码，并避免讨厌的bug。始终记得在适当的范围内声明你的变量，并注意你在哪里尝试访问它们。

当我们结束这堂课时，想象你的代码是一个组织良好的城市。全局变量是每个人都可以访问的公共公园。函数作用域像是带有不同楼层（块）的建筑，每个楼层都有自己的房间（局部作用域）。通过将变量保持在它们适当的“家”中，你将创建一个和谐且运行良好的JavaScript城市！

继续练习，很快你将成为变量作用域的大师。下次见，快乐编码！

Credits: Image by storyset