JavaScript - 全局变量

欢迎，编程新手们！今天，我们将深入了解JavaScript全局变量的世界。作为你友好的计算机老师邻居，我很高兴引导你们了解这个重要的概念。相信我，理解全局变量就像是拥有一个代码的万能遥控器——它非常强大，但你需要明智地使用它！

JavaScript - Global Variables

JavaScript全局变量是什么？

让我们从基础开始。在JavaScript中，全局变量是一个可以在你的代码中任何地方访问的变量。它就像学校里人见人爱的明星学生，每个人都知道并且可以和他/她交流。这些变量在任意函数外部声明，或者在没有使用var、let或const关键字的情况下声明。

这里有一个简单的例子：

let globalGreeting = "你好，世界！";

function sayHello() {
console.log(globalGreeting);
}

sayHello(); // 输出: 你好，世界！

在这个例子中，globalGreeting是一个全局变量。我们可以在sayHello函数内部和外部访问它。

JavaScript 全局作用域

现在，让我们来谈谈作用域。在JavaScript中，“作用域”指的是变量的可见性。全局作用域是一个JavaScript程序中最外层的作用域。在全局作用域中声明的变量可以从程序的任何地方访问和修改。

这里有一个例子来说明全局作用域：

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

function testScope() {
console.log(globalVar); // 在这里可以访问 globalVar
}

testScope(); // 输出: 我是全球的！
console.log(globalVar); // 在这里也可以访问 globalVar

如你所见，globalVar可以在函数内部和外部被访问。就像一个所有人都能听到的公告！

全局变量示例

让我们探索更多例子，以加深我们对全局变量的理解。

示例 1：多个函数访问一个全局变量

let counter = 0;

function incrementCounter() {
counter++;
console.log("计数器值：", counter);
}

function resetCounter() {
counter = 0;
console.log("计数器重置为：", counter);
}

incrementCounter(); // 输出: 计数器值： 1
incrementCounter(); // 输出: 计数器值： 2
resetCounter();     // 输出: 计数器重置为： 0
incrementCounter(); // 输出: 计数器值： 1

在这个例子中，incrementCounter和resetCounter函数都可以访问并修改全局的counter变量。

示例 2：浏览器中的全局对象

在网页浏览器中，全局作用域由window对象表示。任何全局变量或函数都会变成window对象的属性。

var globalVar = "我是一个全局变量";
function globalFunction() {
console.log("我是一个全局函数");
}

console.log(window.globalVar);     // 输出: 我是一个全局变量
window.globalFunction();           // 输出: 我是一个全局函数

这就是为什么有时你会看到window.alert()而不是简单的alert()——它们是同一件事！

自动全局变量

JavaScript中有一个经常让初学者感到困惑的棘手部分：如果你给一个未经声明的变量赋值，它会自动成为一个全局变量。这就像不小心把你的私人日记公开了！

function createGlobal() {
oops = "我意外地变成了全局变量！";
}

createGlobal();
console.log(oops); // 输出: 我意外地变成了全局变量！

在这个例子中，oops即使我们没有打算让它成为全局变量，它也变成了一个全局变量。这通常被认为是一种不良实践，可能会导致难以追踪的bug。始终使用var、let或const声明你的变量！

最佳实践和潜在陷阱

尽管全局变量很有用，但应该谨慎使用。以下原因：

命名冲突：如果你有很多全局变量，你可能会不小心两次使用相同的名称，导致意外的行为。
代码可维护性：全局变量可能会让你的代码更难以理解和维护，特别是在大型项目中。
测试困难：依赖全局变量的函数更难以在隔离环境中测试。

不要过度依赖全局变量，考虑使用局部变量并在需要时将它们作为参数传递给函数。

// 而是使用这个：
let name = "Alice";
function greet() {
console.log("你好, " + name + "！");
}

// 考虑这个：
function greet(name) {
console.log("你好, " + name + "！");
}
greet("Alice");

结论

JavaScript中的全局变量就像是你的代码中的广场——每个人都可以访问，但最好谨慎使用。尽管它们是强大的工具，但记住，能力越大，责任越大！在你继续你的JavaScript之旅时，你将逐渐明白何时使用全局变量，何时保持局部变量。

记住，熟能生巧。尝试创建你自己的例子并尝试使用全局变量。如果你犯了错误——这都是学习过程的一部分。快乐编码，未来的JavaScript大师们！

方法	描述
`var`	声明一个全局变量，或者在整个函数范围内声明一个局部变量，不管块作用域
`let`	声明一个块作用域局部变量，可选地初始化为某个值
`const`	声明一个块作用域只读命名常量
`window.variableName`	在浏览器环境中显式声明一个全局变量
无关键字	隐式声明一个全局变量（不推荐）

Credits: Image by storyset