【JavaScript】作用域 ① ( JavaScript 作用域 | 全局作用域 | 局部作用域 | JavaScript 变量 | 全局变量 | 局部变量 )

韩曙亮

发布于 2024-04-09 08:54:58

1000

发布于 2024-04-09 08:54:58

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 作用域

1、作用域概念

在 JavaScript 代码中 , 使用的变量 / 函数等名称在声明后 , 并不是在所有的位置都有效的 , 限定上述变量 / 函数名称生效的代码范围就是 " 作用域 " ;

" 作用域 " 可以控制变量 / 函数的可访问性 , 即变量 / 函数在哪些代码区域可以被调用 , 在哪些区域不能被调用 ;

作用域可以提高程序的可维护性 , 避免命名冲突 , 在不同的作用域中 , 可以使用相同的名称 ;

2、全局作用域和局部作用域

JavaScript 的作用域分为全局作用域和局部作用域两种类型 :

全局作用域 : 在代码的任何地方都能访问到的变量就处于全局作用域中 , 具体指的就是 <script></script> 标签中 , 或者单独的 js 文件中 ;
局部作用域 : 在代码块内定义的变量具有局部作用域 , 如 : 在函数内部声明的变量具有局部作用域 , 并且只能在该函数内部访问 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 作用域

        // 1. 全局作用域
        // 定义的 num 变量在 整个 <script> 标签中都可以访问
        // 该变量就是 全局变量
        var num = 10;

        // 2. 局部作用域
        function add() {
            // 该 num 变量 和 num2 变量 都是局部变量
            // 这两个变量只能在 函数的内部可以访问
            // 函数外部无法访问这两个变量
            var num = 10;
            var num2 = 20;
            return num1 + num2;
        }
    </script>
</head>

<body>
</body>

</html>

上述代码中 , 全局变量 num 变量与局部变量 num 变量出现了命名冲突 , 这不会影响到局部变量的使用 ;

在局部作用域中 , 相同名称的变量本作用域的变量优先级较高 ;

二、JavaScript 变量

1、全局变量和局部变量

JavaScript 变量根据其被声明的作用域类型 , 分为

全局变量 : 在全局作用域声明的变量 , 就是全局变量 , 全局作用域就是 <script></script> 标签中或者 js 文件中 ; 在函数外部声明的变量 ;
- 特殊情况 : 在全局作用域中没有使用 var 声明 , 而直接赋值使用的变量 , 也是全局变量 ;
局部变量 : 在局部作用域声明的变量 , 就是局部变量 , 局部变量就是在函数中声明的变量 ; 在函数内部声明的变量 ;
- 函数形参 : 函数形参也是局部变量 ;
- 特殊情况 : 在局部作用域中没有使用 var 声明 , 而直接赋值使用的变量 , 也是局部变量 ;

2、全局变量和局部变量生命周期

全局变量和局部变量区别 :

全局变量在任何地方都可以使用 , 在浏览器关闭时被销毁 , 因此使用全局变量要注意内存泄露问题 ;
局部变量只在函数内部使用 , 函数执行后才初始化局部变量 , 函数执行完毕之后局部变量占用的内存就会被释放 ;

在进行 JavaScript 编程的时候 , 建议尽量不适用全局变量 , 能用局部变量就优先使用局部变量 ;

3、代码示例 - 全局变量

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 作用域

        // 1. 全局变量
        // 定义的 num 变量在 整个 <script> 标签中都可以访问
        // 该变量就是 全局变量
        var num = 10;

        // 2. 全局作用域中 没有声明 直接使用的变量 也是 全局变量
        num2 = 20;

        console.log("num = " + num);
        console.log("num2 = " + num2);
    </script>
</head>

<body>
</body>

</html>

执行结果 :

4、代码示例 - 局部变量

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // JavaScript 作用域

        // 1. 函数参数也是 局部变量
        function add(arg) {

            // 函数内部 声明 的变量 是 局部变量
            var num = 10;

            // 3. 局部作用域中 没有声明 直接使用的变量 也是 局部变量
            num2 = 20;

            console.log("arg = " + arg);
            console.log("num = " + num);
            console.log("num2 = " + num2);
        }

        // 调用函数
        add(888);
    </script>
</head>

<body>
</body>

</html>

执行结果 :