JS深入理解作用域

目录

一、什么是作用域

二、作用域

2.1、全局作用域

2.2、函数作用域

2.3、自动全局作用域

三、作用域内部原理

3.1、编译阶段

​3.2、执行阶段

3.3、查询阶段

3.4、嵌套阶段

 3.5、异常阶段

四、词法作用域

五、遮蔽效应

---

一、什么是作用域

作用域指一个变量的作用的范围 。通常来说，一段程序代码中所用到的名字并不总是有效和可用

的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑

的局部性，增强了程序的可靠性，减少了名字冲突。

在 JavaScript 中有两种作用域类型：

（1）全局作用域

（2）函数作用域 （局部作用域）

二、作用域

2.1、全局作用域

直接写在 script 标签中的 JavaScript 代码都是全局作用域。当页面打开运行时全局作用域就会自

动创建，而当页面关闭时就会销毁。在全局作用域中有一个全局的 window 对象可以使用，而所

有全局作用域对象都会作为 window 对象的属性来使用。

示例：

    <script>
        console.log(window);
        var a = 10;
        console.log(window.a);

        function aa() {
            console.log('aa')
        }
        window.aa();

        var aaa = {
            name: '张三'
        }
        console.log(window.aaa.name);
    </script>

注意：如果这个对象 / 属性 / 方法是 window 的，那么在使用这些对象 / 属性 / 方法时，可以省略 window 的编写。

2.2、函数作用域

作用于函数内的代码环境，就是局部作用域。由于跟函数有关，所以也称为函数作用域。

局部作用域（函数作用域）是在调用函数时才会被创建，函数执行完毕后就自动销毁。同时，每

调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。

在函数作用域中可以访问全局作用域，而在全局作用域中不能访问函数作用域。当在函数作用域

中使用一个变量时，它会先在自身作用域内查找，如果找到就直接使用，如果没有找到则会向上

一级作用域查找，直到找到全局作用域为止。如果都没有找到则会报错。

示例：

    <script>
        var age = 18;

        function fn() {
            var age = 20;
            console.log(age); // 20
            console.log(this.age); // 18
            //console.log(this);
            console.log(window.age); // 18
        }
        window.fn();
    </script>

2.3、自动全局作用域

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

示例：

            function fn() {
                age = 19;
                console.log(age);
            }
            fn();
            console.log(window);
            console.log(age);

注意：如果在函数中定义变量时没有指定 var 关键字，那么这个变量会自动提升为全局作

用域的变量。

三、作用域内部原理

作用域内部原理分为 5 个阶段：

（1） 编译阶段

（2）执行阶段

（3）查询阶段

（4）嵌套阶段

（5）异常阶段

3.1、编译阶段

编译过程就是编译器把程序分解成词法单元，将词法单元解析成 AST，再把 AST 转换成机器指 令，等待执行的过程。

3.2、执行阶段

引擎运行代码时首先查找当前的作用域，看 a 变量是否在当前的作用域下，如果是，引擎就会直

接用这个变量；如果否，引擎会继续查找该变量。

如果找到了变量，就会将 2 赋值给当前的变量，否则引擎就会抛出异常。

var a = 2; 
console.log(a);

3.3、查询阶段

当变量在赋值操作的左侧时就叫 LHS （左查询） 查询，出现在右侧时叫 RHS （右查询） 查询。

        var a = 2;// LSH 查询 

        function add() {
            return 2;
        }

        var b = add(); // RHS 查询

下面以示例进行分析查询过程：

        function fn(a) {
            console.log(a);
        }
        fn(1);

查询过程：

（1）fn() ：会对 fn 函数对象进行 RHS 查询；

（2） 函数传参 a = 1 ，对变量 a 进行 LSH 查询；

（3）console.log(a) ：对 console 对象进行 RHS 查询，并检查是否有 log() 方法；

（4）console.log(a) ：对变量 a 进行 LHS 引用，并把的值传给 log() 方法。

3.4、嵌套阶段

下面以一个例子来说明作用域变量的查找机制。

        function fn(a) {
            console.log(a + b);
        }
        var b = 2;
        fn(4);

 3.5、异常阶段

        function fn(a) {
            a = b; // b is not defined 

        }
        fn(2);

        function fn2() {
            var b = 0;
            b(); // b is not a function 
        }
        fn2();

        function fn3() {
            a = 1;
        }
        fn(); // 如果不先执行这名，会报 a is not defined

案例分析：

        function fn(a) {
            console.log(a);
        }
        fn(2);

首先引擎会对 fn 进行 RHS 查询，找到后返回执行，然后对 a 进行 LHS 引用查询，找到后把 2 对其进行赋值。接下来对 console 进行 RHS 引用查询，由于 console 是内置对象， 能够成功找到，然后在 console 中 RHS 引用查询 log() 方法，找到后执行这个方法，最后RHS 引用查询变量 a ，由于在函数作用域中能够查找到，因此进行 RHS 引用查询并输出。

四、词法作用域

词法作用域是指在当前作用域下的所有声明的标识符。

      function fn(a) {
            var b = a * 2;

            function bar(c) {
                console.log(a, b, c);//2 4 12
            }
            bar(b * 3);
        }
        fn(2);

五、遮蔽效应

作用域查找从运行时所处的最内部作用域开始，逐级向上进行查找，直到遇到第一个匹配的标识

符为止。

在多层的嵌套作用域可以定义同名的标识符，这就叫做遮蔽效应。

    <script>
        var a = 0;

        function fn() {
            var a = 1;
            console.log(a);
        }
        fn();
    </script>

说明：从上面代码运行结果可以得到：局部变量 a 遮蔽了全局变量 a （或者叫覆盖了全局变

量），这种情况就叫遮蔽效应。