js 函数的概念，定义，调用，声明与赋值，预解析，参数，默认值，返回值

1. 函数

    前端的函数, 与数学的函数, 完全是两个概念

    可以粗暴的理解为 一个盒子

    当一段需要多次使用的复杂代码段, 我们可以把它放在(抽离)一个盒子中(就是函数)

    在需要使用的地方去调用即可

    如何拥有(使用)函数

    函数分为 定义(创建)和调用

    定义(创建): 必须要有, 没有的话, 无法调用

    调用: 也必须要有, 没有的话, 定义就没有意义了

2. 定义

    语法: function () {}

    1.赋值式定义      var fn = function () {}

    声明式定义      function 函数名() {}

    具体含义:

    function ---> 关键字

    函数名(可以不写) ---> 不写的函数, 我们称之为匿名函数, 如果有 叫具名函数(函数)

    ()  ---> 书写参数的位置(暂时不讲)

    {}  ---> 代码, 函数调用要执行的代码

    2.调用

    函数的定义分两种方式, 调用 只有 1 种

    语法: 函数名()

    3.声明式与赋值式的区别

    区别:

         1. 书写

         2. 调用

            赋值式定义, 不能再定义前 调用函数, 声明式可以

        fn()

        fn1()   // 正常调用

        var fn = function () {

            console.log(1)

        }

        function fn1() {

            console.log(2)

        }

        fn()

        fn1()

3. 变量提升

    在 浏览器读 JS 代码的时候 有一个 预解析, 此时会有一个变量提升

    什么是变量提升

    在预解析时, 将 JS 内部的 变量 全部提升到 当前作用域顶端(当前代码的最上边)

    变量提升的时候, 值不会到最顶端, 可以理解为, 把声明变量提升到最顶端, 但是没赋值

    什么是 变量提升

         自己写的代码:

                fn()

                var fn = function () {

                    console.log(1)

                }

                fn()

            浏览器预解析

                fn()                        ---> 不需要变量提升

                var fn = function () {      ---> 需要变量提升

                    console.log(1)

                }

                fn()                        ---> 不需要变量提升

            变量提升后

                var fn;         ---> fn == undefined

                fn()            ---> undefined()

                fn = function () {console.log(1)}

                fn()            ---> 打印1

    浏览器在预解析的时候, 除了会做 变量提升

         还会做一件事; 函数的声明提升(值也跟着上去了)

         自己写的代码

            fn()

            function fn() {

                console.log(1)

            }

            fn()

            浏览器预解析

            fn()                ---> 不需要提升

            function fn() {     ---> 需要 函数声明提升

                console.log(1)

            }

            fn()                ---> 不需要提升

            函数声明提升后

            function fn() {

                console.log(1)

            }

            fn()            ---> 正常打印

            fn()            ---> 正常打印  

4. 函数的参数

        为什么要有 参数?

        如果 没有 参数, 那么函数的功能 相对单一, 不够灵活

        函数的参数 他的 作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用

        参数也可以让我们的函数更具有 差异性

        参数语法

            1. 形参     --->    function或者函数名后的 小括号

            2. 实参     --->    函数调用时的 小括号中

            参数的作用

            1. 形参

            每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值 是由 实参传递进来的

            2. 实参

            按照书写顺序 一一对应, 传递给形参

5. 函数参数的数量

        参数数量不一致

            1. 形参少, 实参多

            2. 实参少, 形参多

        1. 形参少, 实参多

            function fn(a) {

                 console.log(a)

            }

            fn(1, 2, 3)

         1. 形参少, 实参多

            我们当前案例, 传递 1个形参, 3个实参

            第一个实参, 传递给 对应的形参

            后续的所有参数, 都不能通过形参获取

         2. 实参少, 形参多

            我们当前案例, 传递 3个形参, 1个实参

            第一个实参, 传递给对应的形参

            后续没有实参

            所以, 后续的形参相当于 之声明不赋值 ===> undefined  

6. 函数参数的默认值

    函数参数的默认值

            创建形参的时候, 直接赋值

            如果传递对应实参, 按照实参的值

            如果没有传递对应实参, 按照默认值

            function fn(a, b, c){

            console.log(a, b, c)

            }

            fn(200)

            function fn1(a, b = 100, c = 200){

                console.log(a, b, c)

            }

            fn1(50)

            fn1(50,100)

            fn1(50,100,200)

7. 函数的返回值

    函数的返回值

        每一个函数都有返回值, 不管是否写了返回值

        每个函数 默认都会有返回值 ---> 默认返回 undefined

        如果我们自己手写了 返回值, 那么就不会返回默认值了, 返回的是 我们书写的

            函数返回值书写语法

            return 要返回的内容

            注意点:

            函数的返回值具有中断函数的功能, 所以我们手写返回值需要放在最后

            var num = prompt('请输入一个值')

            function fn() {

            console.log(1)

        }

        var myFn = fn() // fn 函数的返回值, 会赋值给 变量 myFn

        console.log(myFn)   // ---> undefined

        function fn1() {

            return '我是 fn1 的返回值'

        }

        var myFn1 = fn1()

        console.log(myFn1)  // 我是 fn1 的返回值

        function fn() {

            console.log(1)

            console.log(2)

            console.log(3)

            return 500

        }

        fn()

        function fn(a) {

            规定, 函数不能接受数字。

            if (typeof (a) == 'number') {

                console.log('哈哈哈')

                return

            }

            if (typeof (a) == 'number') return

            console.log('参数 a 不是数字类型的, 所以会执行到我这个位置')

            }

            fn('100')