函数的概念

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

函数的定义

语法: function () {}

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

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

函数的调用

赋值式定义, 不能再定义前 调用函数, 声明式可以
    fn()    // fn is not a function
    var fn = function () {
        console.log(1)
    }
    fn1()
    function fn1() {
        console.log(2)
    }
    fn()
    fn1()

函数的预解析

在 浏览器读 JS 代码的时候 有一个 预解析, 此时会有一个变量提升
什么是变量提升
    在预解析时, 将 JS 内部的 变量 全部提升到 当前作用域顶端(当前代码的最上边)
    变量提升的时候, 值不会到最顶端, 可以理解为, 把声明变量提升到最顶端, 但是没赋值

var fn;
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()                ---> 正常打印

函数的参数

为什么要有 参数? 如果 没有 参数, 那么函数的功能 相对单一, 不够灵活 函数的参数 他的 作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用 参数也可以让我们的函数更具有 差异性

    参数语法
    1. 形参     --->    function或者函数名后的 小括号
    2. 实参     --->    函数调用时的 小括号中
    
    参数的作用
    1. 形参
        每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值 是由 实参传递进来的
    2. 实参
        按照书写顺序 一一对应, 传递给形参

    function fn(a, b) {         // 形参a, b 相当于 在函数内创建两个变量
        // console.log(a, b)    // 1 100
        console.log(a + b)
    }
    fn(1, 100)

    fn(200, 100)

* 1. 形参少, 实参多
    // function fn(a) {
    //     console.log(a)  // 1
    // }
    // fn(1, 2, 3)
    
    1. 形参少, 实参多
        我们当前案例, 传递 1个形参, 3个实参
            第一个实参, 传递给 对应的形参
            后续的所有参数, 都不能通过形参获取
    
* 2. 实参少, 形参多
    function fn(a, b, c) {
        console.log(a, b, c)    // 100 undefined undefined
    }
    fn(100)
    
    2. 实参少, 形参多
        我们当前案例, 传递 3个形参, 1个实参
        第一个实参, 传递给对应的形参
        后续没有实参
        所以, 后续的形参相当于 之声明不赋值 ===> undefined

函数的参数默认值

    创建形参的时候, 直接赋值
        如果传递对应实参, 按照实参的值
        如果没有传递对应实参, 按照默认值

    function fn1(a, b = 100, c = 200) {
        console.log(a, b, c)
    }
    fn1(50)                 // 50, 100, 200
    fn1(50, 500)            // 50, 500, 200
    fn1(50, 500, 1000)      // 50, 500, 1000

函数的返回值

函数的返回值
    每一个函数都有返回值, 不管是否写了返回值
    每个函数 默认都会有返回值 ---> 默认返回 undefined
    
    如果我们自己手写了 返回值, 那么就不会返回默认值了, 返回的是 我们书写的
     
    函数返回值书写语法
        return 要返回的内容
     
    
    注意点:
        函数的返回值具有中断函数的功能, 所以我们手写返回值需要放在最后

    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()