【JavaScript】作用域 ③ ( JavaScript 作用域链 | 作用域链变量查找机制 )

韩曙亮

发布于 2024-04-09 08:56:44

790

发布于 2024-04-09 08:56:44

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

一、JavaScript 作用域链

1、作用域

在 JavaScript 中 , 任何代码都有作用域 ,

全局作用域 : 在 <script> 标签中或者 js 脚本中定义的变量属于全局作用域 ;
局部作用域 : 在函数中定义的变量属于局部作用域 ;
块作用域 :
- ES6 中在 {} 代码块中使用 let / const 定义的常量 / 变量属于块作用域 ;
- ES6 之前使用 var 关键字在 {} 代码块中定义的变量 , 取决于代码块位置 , 代码块在全局作用域则该变量属于全局作用域 , 代码块在局部作用域则该变量属于局部作用域 ;

2、作用域链

如果在函数的局部作用域中 , 又定义了一个函数 , 则诞生了一个新的局部作用域 ;

作用域链概念 : 在内部函数访问外部函数的变量或全局变量 , 此时需要使用链式查找的方法 , 确定取哪个值 , 这种作用域结构称为 " 作用域链 " ;

内部函数 , 外部函数 , 全局变量中 , 定义的变量名称可能是相同的 , 给定一个变量名 , 需要从作用域链中具体查找

作用域链是 JavaScript 的重要的概念 , 用于查找变量名对应的不同作用域的变量 ;

当 JavaScript 代码执行时 , 会创建变量对象的作用域链 , 其用途是保证对执行环境有权访问的所有变量和函数的有序访问 ;

3、作用域链变量查找机制

在 JavaScript 代码中的嵌套作用域中 , 查找变量或函数的机制就是作用域链的链式查找机制 ;

内部函数在访问指定名称的变量时 , 采取的是链式查找方式 ;

如果内部函数的局部作用域有该变量 , 则采用该变量 ;
如果内部函数的局部作用域没有该变量 , 则向上一层外部函数局部作用域查找 ;
- 如果外部函数的局部作用域有该变量 , 则采用该变量 ;
- 如果外部函数的局部作用域没有该变量 , 则向上一层全局作用域查找 ;
  - 如果全局作用域有该变量 , 则采用该变量 ;
  - 如果全局作用域没有该变量 , 则报 " 变量未定义 " 错误 ;

二、代码示例 - 作用域链

在下面的代码中 :

首先 , 在全局作用域中定义 num 变量 , 该变量的作用域属于全局作用域 ;

然后 , 定义外部函数 , 在全局作用域中定义 out_fun 函数 , 在该函数的范围内是局部作用域 ;

最后 , 定义内部函数 , 在 out 函数中 , 定义了 in_fun 函数 , 在局部作用域中又诞生了一个新的局部作用域 ;

在全局作用域 , 内部函数 , 外部函数 , 都定义一个 num 变量 ,

在 in_fun 内部函数中 , 可以访问内部函数 / 外部函数 / 全局作用域中的变量 ;
在 out_fun 外部函数中 , 可以访问外部函数 / 全局作用域中的变量 ;
在全局作用域中 , 只能访问全局作用域中的变量 ;

完整代码示例 :

<!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>
        // 作用域链

        // 全局作用域 变量
        var num = 333;

        function out_fun() {
            // 外部函数 局部作用域 变量
            var num = 666;

            function in_fun() {
                // 内部函数 局部作用域 变量
                var num = 999;

                // 打印查找的 num 变量
                console.log("in_fun : num = " + num)
            }

            // 调用内部函数
            in_fun();

            // 打印查找的 num 变量
            console.log("out_fun : num = " + num)
        }

        // 打印查找的 num 变量
        console.log("global : num = " + num)

        // 调用外部函数
        out_fun()
    </script>
</head>

<body>
</body>

</html>

执行结果 :