JavaScript 全局变量与局部变量

在 JavaScript 中，变量有一定的作用域（也就是变量的有效范围）。根据作用域，变量可以分为以下 2 种。

全局变量。
局部变量。

JavaScript 全局变量

在 JavaScript 中，全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。说白了，全局变量在任何地方都可以用。

示例 1：使用全局变量

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = "十里";

        // 定义函数
        function getMes() {
            const b = a + "桃花";
            console.log(b);
        }

        // 调用函数
        getMes();
    </script>
</body>
</html>

运行结果如下。

十里桃花

分析：

由于变量 a 是在主程序中定义的，因此它是全局变量，也就是在程序任何地方（包括函数内）都可以使用它。而变量 b 由于是在函数内部定义的，因此它是局部变量，也就是只限在 getMes() 函数内部使用。

JavaScript 局部变量

在 JavaScript 中，局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。说白了，局部变量只能在函数中使用，函数之外是不能使用函数之内定义的变量的。

示例 2：使用局部变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = "十里";

        // 定义函数
        function getMes() {
            const b = a + "桃花";
        }

        // 调用函数
        getMes();

        // 尝试使用函数内的变量b
        const result = "三生三世" + b;
        console.log(result);
    </script>
</body>
</html>

浏览器控制台效果如下图所示。

JavaScript 局部变量

分析：

咦，为啥没有内容呢？这是因为变量 b 是局部变量，它只能在函数之内使用，不能在函数之外使用。如果我们想要在函数之外使用函数之内的变量，可以使用 return 语句返回该变量的值，请看下面例子。

示例 3：使用 return 语句返回局部变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const a = "十里";

        // 定义函数
        function getMes() {
            const b = a + "桃花";
            return b;
        }

        // 调用函数
        const result = "三生三世" + getMes();
        console.log(result);
    </script>
</body>
</html>

运行结果如下。

三生三世十里桃花

分析：

最后需要清楚的是，在现代 JavaScript（使用 let 和 const）中，不仅是函数，任何一对花括号 “{}”（如 if 语句、for 循环）都会形成一个独立的 “小地盘”。在这些花括号里定义的变量，在花括号外面也是用不了，这种作用域方式也被称为 “块级作用域”。