JavaScript 进阶

一、作用域：

        1.全局作用域

        含义：在JavaScript中，函数外部所有作用范围都称为全局作用域

        全局变量：在全局作用域中定义的变量称为全局变量

        全局变量特点：在全局作用域中的全局变量可以在任何地方被访问到

<script>
        // 变量a是一个全局变量
        let a = 123;
        // 函数fn是一个全局变量

        function fn() {
            console.log(a)
        }
        fn()
        // 数组ary是一个全局变量
        let ary = []
</script>

        2.局部作用域

        含义：在函数内部形成的作用范围称为局部作用域或者函数作用域

        局部变量：在局部作用域中定义的变量

        局部变量特点：局部变量只能在当前作用域中被访问

<script>
        // 全局变量
        let a = 2

        function fn() {
            // 局部变量
            let a = 1
            console.log(a)  // 1
        }
        fn()
</script>

        3.块级作用域

        含义：在JavaScript中，通过 let 关键字或者 const 关键字 定义变量且位于{ }中，就会形成块级作用域

        块级作用域特点：变量只能在当前块级作用域中被访问

<script>
        {
            let a = 123;
            console.log(a)
        }

        if (true) {
            let userName = 'dhl';
        }
    </script>

        4.作用域链

        含义：在JavaScript中，多个作用域嵌套形成的一个链状结构

        作用：通过作用域链进行变量查找（就近原则）

<script>
        // age是一个全局变量
        let age = 20
        // fn 是一个全局变量
        function fn() {
            // age 是一个局部变量
            let age = 23
            // fn1是一个局部变量
            function fn1() {
                // age 是一个局部变量
                let age = 30
                console.log(age)
            }
            fn1()
        }
        fn()
    </script>

        5.const关键字

        含义：在程序中定义常量的关键字

        注意事项：

• const 定义常量的时候必须设置初始值
• const 定义常量后，常量的值不能被修改
• const 定义常量名不能重复
• const 可以产生块级作用域

        6.闭包函数

        其本质上就是一个函数

        含义：就是能够读取其他函数内部变量的函数就叫做闭包函数

        作用：可以延长变量的使用生命周期

        7.变量与函数提升

        变量提升：使用var关键字定义变量的时候，程序会先将变量的声明提升到当前作用域的开始，不包括赋值

        函数提升：定义函数的时候，程序会将函数的声明提升到当前作用域的开始位置，不包括函数的调用

        ps：let 不存在变量提升

        注意点：当程序中同时出现变量和函数的时候，先提升函数，再提升变量（前提是变量必须是使用var定义的）

二、函数：

        1.默认值参数

        含义：函数中的参数可以设置默认值

<script>
        function fn(a, b) {
            console.log(a, b);
        }
        fn()

        function fn2(a = 1, b = 2) {
            console.log(a + b);
        }
        fn2() // 3
</script>

        2.动态参数-- arguments

         含义：arguments是函数中用来保存实参信息的一个数组

        用法：当函数中实参的个数不确定的时候可以通过arguments获取实参信息

<script>
        function fn() {
            console.log(arguments);
        }
        fn(1, 2, 3, 4);
</script>

        例子：封装一个函数，求任意个数字的和

<script>
        // 1.封装一个函数，求任意个数字的和
        function getSum() {
            let sum = 0
            if (arguments.length > 0) {
                for (let i = 0; i < arguments.length; i++) {
                    if (isNaN(arguments[i]) == false) {
                        sum += Number(arguments[i])
                    } else {
                        alert('请输入合法的数字')
                    }
                }
                console.log(sum)
            }
        }
        getSum(1, 2)
</script>

        3.剩余参数

        语法：...自定义参数名

        作用：用来获取多余的实参值（类似于arguments）

        注意事项：

• 剩余参数必须写在函数形参的最后
• 剩余参数的名字是自定义的
• 剩余参数保存的值是以数组形式保存的

<script>
        function fn(a, b, ...c) {
            console.log(a, b, c);
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
</script>

        4.箭头函数

        语法：（）=> { } 等价于 function（）{ }

        函数的组成：

• 函数名
• 参数
• 函数体
• 返回值

        注意事项：

        1）如果有且只有一个参数，可以省略（）

        2）如果函数体只有一行代码，可以省略 { } 

        3）如果函数只有一行代码，返回值return可以省略

        4）箭头函数中不能使用arguments，只能使用剩余参数

        5）箭头函数中没有自己的this，this是父级作用域中的this