8 - 变量与数据类型 - 变量声明 - 变量的作用域规则

变量与数据类型 - 变量声明 - 变量的作用域规则

在 JavaScript 的奇妙世界里，变量就像是一个个小盒子，我们可以把各种数据存放在里面。而变量的作用域规则则决定了这些“小盒子”在什么地方是可见的、可以被使用的。接下来，就让我们一起深入探究 JavaScript 中变量的作用域规则。

全局作用域

全局作用域就像是一个巨大的公共仓库，里面的“小盒子”（变量）在整个程序的任何地方都可以被访问。

// 声明一个全局变量
var globalVariable = '我是全局变量';
function showGlobalVariable() {
    // 在函数内部访问全局变量
    console.log(globalVariable); 
}
showGlobalVariable(); // 输出: 我是全局变量
console.log(globalVariable); // 输出: 我是全局变量

在这个例子中，globalVariable 是一个全局变量，无论是在函数内部还是函数外部，都可以对它进行访问。

函数作用域

函数作用域就像是每个函数自己的私人仓库，在函数内部声明的变量只能在该函数内部被访问。

function showFunctionScope() {
    // 声明一个函数作用域的变量
    var functionVariable = '我是函数作用域变量';
    console.log(functionVariable); 
}
showFunctionScope(); // 输出: 我是函数作用域变量
// 尝试在函数外部访问函数作用域变量
console.log(functionVariable); 
// 报错: Uncaught ReferenceError: functionVariable is not defined

这里的 functionVariable 只能在 showFunctionScope 函数内部使用，当我们在函数外部尝试访问它时，就会报错。

块级作用域

ES6 引入了 let 和 const 关键字，它们具有块级作用域。块级作用域就像是一个更小的独立空间，由一对花括号 {} 定义。

{
    // 声明一个块级作用域的变量
    let blockVariable = '我是块级作用域变量';
    console.log(blockVariable); 
}
// 尝试在块级作用域外部访问块级作用域变量
console.log(blockVariable); 
// 报错: Uncaught ReferenceError: blockVariable is not defined

在这个例子中，blockVariable 只能在定义它的花括号内部被访问，外部无法访问。

作用域规则总结

作用域链

当我们在一个作用域中访问一个变量时，JavaScript 会首先在当前作用域中查找该变量。如果找不到，就会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。

var outerVariable = '外部变量';
function outerFunction() {
    var innerVariable = '内部变量';
    function innerFunction() {
        console.log(innerVariable); 
        console.log(outerVariable); 
    }
    innerFunction();
}
outerFunction();

在 innerFunction 中，首先在自身作用域中查找 innerVariable，找到后输出；接着查找 outerVariable，自身作用域中没有，就沿着作用域链到 outerFunction 的作用域中查找，还是没有，最后到全局作用域中找到并输出。

通过对变量作用域规则的学习，我们可以更好地管理变量，避免变量名冲突，提高代码的可读性和可维护性。在 JavaScript 的编程之旅中，合理运用作用域规则，将会让我们的代码更加高效、优雅。