函数

不是数学中的函数
函数可以理解为一个盒子

为什么要有函数, 函数功能是什么

帮我们把项目中多个地方使用到的功能(代码段), 抽离出来(就把他拿到那个小盒子, 就不需要在多个地方书写重复的功能)
然后在需要的地方调用函数即可

写一个函数(或者说一个完整的函数)

分为两部分

定义阶段
调用阶段

函数的定义语法: function () {} 两种定义函数的方式

赋值式定义 var fn = function () {}
声明式定义 function 函数名() {}

赋值式定义

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

声明式定义

 function fn1() {}
 console.log(fn1)

详情解析

     *  function () {}  ---> 匿名函数
     *      function    关键字, 表明后续紧跟一段代码, 是函数
     *      ()          内部书写, 参数      后续讲,暂时先记住, 暂时理解为 固定写法 
     *      {}          内部书写, 函数调用执行时 的代码(可以理解为 要执行的代码)
     * 
     *  function fn1() {}   ---> 具名函数
     *      funtion     关键字, 同上
     *      fn1         函数名, 将来可以通过 这个名字(变量) 去调用(去找到)本函数
     *      ()          参数, 同上
     *      {}          要执行的代码段, 同上555555555
    */

赋值式定义

    var fn = function () {
        console.log(111)
    }

他没有函数名, 但是存储在变量 fn 中, 所以我们可以把 fn 理解为当前这段函数的函数名

声明式定义

    function fn1() {
        console.log(222)
    }

不管函数定义是如何定义的, 调用方式永远只有一种

语法: 函数名()

函数声明式和赋值式的区别

书写不同
打印时, 声明式会带上函数名, 赋值式没有
调用时有差异：声明式: 可以在函数定义前调用

函数的参数是做什么

我们的函数在不写参数的时候, 可以正常执行
但! 功能相对单一
如果函数想要真正的灵活起来, 在多个地方调用时有不同的执行, 那么我们可以通过函数的参数来完成

参数分为两个

形参函数名后(function) 后边的小括号内部, 每书写一个就相当于在函数内部声明一个变量, 可以在函数内部去调用
实参调用函数时的小括号内部书写的值, 就是实参, 实参与形参为一一对应的关系

形参与实参会一一对应

如果实参数量少于形参那么前边的形参对应接受值, 没有对应实参的形参值为 undefined

如果形参数量少于实参那么会一一对应后, 多余的实参无法通过参数获取

  function add(a, b) {
       console.log(a + b)
  }

  add(1, 2)   // 3
  add(1, '2')   // '12'

函数的返回值

语法: return 需要返回的内容
函数默认返回值

我们可以不写 return 函数会默认在代码段最后一行写上 retrun undefined

我需要写返回值吗?

我什么时候需要写返回值

返回值的书写取决于是否需要得到函数内部某一个变量的值, 如果需要可以使用返回值将其返回, 如果不需要我们可以不写

return

具有中断函数执行的功能
如果不想中断函数, 那么一定要将 return 放在函数的最后
除非就是想要通过 return 中断函数的运行

函数的预解析

函数的预解析, 可以能会遇上同名变量的变量提升(变量的预解析) 直接以函数为主

        var fn = 'hhh'
        console.log(fn)

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

在 JS 中只有变量和函数才会有预解析或者提升

        1. var fn = 'hhh'       // 有提升
        2. console.log(fn)      // 没有

        3. fn()                 // 没有
        4. function fn() {      // 有提升
             console.log(1)
            }
        5. fn()                 // 没有

        预解析之后
            1. function fn() {
                console.log(1)
                }
            2. var fn;  // 没意义

            3. fn = 'hhh'   // 这行很重要, 直接将变量内保存的 函数 更改为了 'hhh'

            4. console.log(fn)  // 按照分析, 此处应该打印 'hhh'

            5. fn()     // 按照分析, 此处 fn 的值应该 'hhh' 所以会报错 fn is not a function

            6. fn()     // 按照分析, 此处 fn 的还是 'hhh' ,所以还会报错 fn is not a function