【JavaScript】11 - JavaScript作用域

JavaScript作用域

需要思考的问题：

1. JavaScript的两种作用域有哪两种？
2. 如何区分全局变量和局部变量？
3. 如何在作用域链中查找变量的值？

1、作用域

1.1 - 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript作用域：

就是代码名字（变量）在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突。

ES6之前：

1. 全局作用域

整个script标签；或者是一个单独的js文件。

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

在函数内部就是局部作用域（这个代码的名字只在函数内部起效果和作用）。

        var num = 10;
        console.log(num);//10

        function fn() {
            var num = 20;
            console.log(num);
        }
        fn();//20

1.4 - JS没有块级作用域（ES6之前）

ES6新增了块级作用域{}。

2、变量的作用域

2.1 - 变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种：

1. 全局变量（在函数外部定义的变量）

• 全局变量在代码的任何位置都可以使用；
• 在全局作用域下var声明的变量是全局变量；
• 特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）。

2. 局部变量（在函数内部定义的变量）

• 局部变量只能在该函数内部使用；
• 在函数内部var声明的变量是局部变量；
• 函数的形参实际上就是局部变量。

注意：函数的形参也可以看做是局部变量。

        var num = 10;

        function fn() {
            var num1 = 20;
            console.log(num);
        }

        fn(); //10
        console.log(num1); //num1 is not defined

2.3 - 全局变量和局部变量的区别

• 从执行效率来看全局变量和局部变量
  1. 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源。
  2. 局部变量当我们程序执行完毕就会销毁， 比较节约内存资源。

3、作用域链

• 只要是代码，就至少有一个作用域。
• 写在函数内部的局部作用域。
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

        var num = 10;
        var num1 = 5;

        function fn() { //外部函数
            var num = 20;

            function fun() { //内部函数
                console.log(num); //20
                console.log(num1); //5
            }
            fun();
        }
        fn();

案例1：结果是几？

        function f1() {
            var num = 123;

            function f2() {
                console.log(num);
            }
            f2();
        }
        var num = 456;
        f1();

最后结果输出：123。

案例2：结果是几？

        var a = 1;

        function fn1() {
            var a = 2;
            var b = '22';
            fn2();

            function fn2() {
                var a = 3;
                fn3();

                function fn3() {
                    var a = 4;
                    console.log(a); //a的值?
                    console.log(b); //b的值?
                }
            }
        }
        fn1();

最后结果：a的值是 4；b的值是'22'

---

END