函数

• 是被设计为执行特定任务的代码块

  • 把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行，有利于精简代码方便复用。

声明

        //  1. 函数的声明
        function 函数名() {
            函数体
        }
        function sayHi() {
            document.write(`你好我是李狗蛋<br>`)
        }

• 命名规范

调用

        // 2. 函数调用 函数名()
        sayHi()

• 不调用不执行
• 随时调用，随时执行，可重复调用

传参

• 提高函数灵活性

• 声明

• 调用

• 形参
  • 声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
• 实参
  • 调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

返回值

• 为了保证代码的灵活性，不直接在函数内部写死最终数据的输出方式，给函数设定返回值，让开发者决定后续如何对当前函数运行后的结果进行操作
• return

        function getSum(x, y) {
            alert(123)
            alert(345)
            return x + y
        }
    console.log(getSum(1, 2));

• 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
• 函数可以没有 return，这种情况函数默认返回值为 undefined

作用域

• 全局作用域

  • 作用于script标签内部

    • 可在任何区域访问和修改

• 局部作用域

  • 作用于函数内
    • 只能在当前函数内部访问和修改
    • 函数内部的形参可以看做是局部变量

• 块级作用域

  • 由{}包裹

    • 只能在块作用域里修改

• 如果函数内部或块级作用域内部，变量没有声明，直接赋值，也当全局变量看

• 作用域链

  • 采取就近原则的方式来查找变量最终的值

        let a = 1
        let b = 10
        function fn1() {
            let a = 2
            let b = '22'
            fn2()
            function fn2() {
                let a = 3
                fn3()
                function fn3() {
                    let a = 4
                    console.log(a) // a的值 4
                    console.log(b) // b的值 '22'
                }
            }
        }
        fn1()

匿名函数

• 将匿名函数赋值给一个变量，并且通过变量名称进行调用

• 立即执行函数

        // 立即执行函数，作用：避免重复声明变量名导致代码bug

        (function () {
            函数体
        })();

        (function () {
            let res = 1
            console.log(1, '李狗蛋写的');
        })();

        (function () {
            let res = 2
            console.log(2, '张翠花写的');
        })();

• 防止变量污染
• 无需调用，立即执行，其实本质已经调用了
• 多个立即执行函数之间用分号隔开

函数参数

• arguments代表传递进来参数的伪数组，伪数组无法使用一些数组的方法

        // 如果 实参个数大于形参，则后续传递进去的值会忽略
        // 如果 实参个数小于形参，则形参默认为undefined
        // 函数中 arguments代表传递进来参数的伪数组，伪数组无法使用一些数组的方法 
        function getSum() {
            // 遍历数组
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum = sum + arguments[i]
            }
            document.write(sum)
        }

        getSum(10, 20, 30)