【学习笔记15】JavaScript的函数

一、函数

笔记首发

（一）什么是函数

1. 🙄 前端的函数, 与数学的函数, 完全是两个概念
2. 🙄 可以粗暴的理解为 一个盒子
3. 🙄 当一段需要多次使用的复杂代码段, 我们可以把它放在(抽离)一个盒子中(就是函数)
4. 🙄在需要使用的地方去调用即可

（二）如何拥有(使用)函数

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

• 😕 定义(创建): 必须要有, 没有的话, 无法调用
• 😕 调用: 也必须要有, 没有的话, 定义就没有意义了

1、定义函数

1 语法: function () {}

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

2 具体含义

• 🥰 function —> 关键字
• 🥰 函数名(可以不写) —> 不写的函数, 我们称之为匿名函数, 如果有 叫具名函数(函数)
• 🥰 () —> 书写参数的位置(形参)
• 🥰 {} —> 代码, 函数调用要执行的代码

2、函数调用

• 😕 函数的定义分2种方式, 调用只有1种
• 🙄 语法: 函数名()

        var fn1 = function () {
            // 这里边写上将来调用时要执行的代码
            console.log('我是函数fn1, 我是赋值式定义的')
        }
        fn1()

        function fn2() {
            // 这里边写上将来调用时要执行的代码
            console.log('我是函数fn2, 我是声明式定义的')
        }
        fn2()
1
2
3
4
5
6
7
8
9
10
11

（三）明式与赋值式的区别

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

1、赋值式函数

        fn()   //fn is not a function
        var fn = function () {
            console.log(1);
        }
1
2
3
4

2、声明式函数

        fn()     //2
        function fn() {
            console.log(2);
        }
1
2
3
4

二、变量提升

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

（一）什么是变量提升

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

（二）赋值式变量提升

        fn()
        var fn = function () {
            console.log(1);
        }
        fn()
1
2
3
4
5

    自己写的代码:
        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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

（三）声明式变量提升

        fn()
        function fn() {
            console.log(1);
        }
        fn()
1
2
3
4
5

    自己写的代码 
        fn()
        function fn() {
            console.log(1)
        }
        fn()

    浏览器预解析
        fn()                ---> 不需要提升
        function fn() {     ---> 需要 函数声明提升
            console.log(1)
        }
        fn()                ---> 不需要提升

    函数声明提升后
        function fn() {
            console.log(1)
        }

        fn()            ---> 正常打印
        fn()            ---> 正常打印
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、函数的参数

（一）为什么要有参数

    /**
     *  为什么要有参数?
     *      如果没有参数, 那么函数的功能相对单一, 不够灵活
     *      函数的参数他的作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用 
     *      参数也可以让我们的函数更具有差异性
     * 
     *  参数语法
     *      1. 形参     --->    function或者函数名后的小括号
     *      2. 实参     --->    函数调用时的小括号中
     * 
     *  参数的作用
     *      1. 形参
     *           每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值是由实参传递进来的
     *      2. 实参
     *           按照书写顺序 一一对应, 传递给形参
    */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1、不传参数

    function fn() {
      console.log(1);  // 想想这是一段很复杂的功能
      console.log(1);  // 想想这是一段很复杂的功能
      console.log(1);  // 想想这是一段很复杂的功能
      console.log(1);  // 想想这是一段很复杂的功能
      console.log(1);  // 想想这是一段很复杂的功能
    }

    fn()
1
2
3
4
5
6
7
8
9

2、传参数

    function fn(i) {
      console.log(i)  // 想想这是一段很复杂的功能
      console.log(i)  // 想想这是一段很复杂的功能
      console.log(i)  // 想想这是一段很复杂的功能
      console.log(i)  // 想想这是一段很复杂的功能
      console.log(i)  // 想想这是一段很复杂的功能
    }

    var num = fn(1)  // 调用的时候打印1
    console.log(num)
1
2
3
4
5
6
7
8
9
10

（二）函数参数的数量

参数数量不一致
😏 1. 形参少, 实参多
😥 2. 实参少, 形参多

1、形参少, 实参多

        function fn(a) {
            console.log(a)  // 1
        }
        fn(1, 2, 3)
1
2
3
4

        我们当前案例, 传递 1个形参, 3个实参
        第一个实参, 传递给对应的形参
        后续的所有参数, 都不能通过形参获取
1
2
3

2、实参少, 形参多

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

        我们当前案例, 传递3个形参, 1个实参
        第一个实参, 传递给对应的形参
        后续没有实参
        所以, 后续的形参相当于 之声明不赋值 ===> undefined
1
2
3
4

四、函数参数的默认值

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

        function fn(a, b, c) {
            // 100 undefined undefined
            console.log(a, b, c)    
        }
        fn(100)

        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
1
2
3
4
5
6
7
8
9
10
11
12

五、函数的返回值

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

        function fn1() {
            // console.log(1)
        }
        // fn函数的返回值, 会赋值给变量myFn
        var myFn = fn1() 
         // undefined
        console.log(myFn)  

        function fn2() {
            return '我是fn2的返回值'
        }
        var myFn1 = fn2()
        console.log(myFn1)  // 我是fn1的返回值
1
2
3
4
5
6
7
8
9
10
11
12
13

return中断效果

    function fn(i) {
      if (i == 0 ) {
        return '参数i==0, 函数被中断执行'
      }

      console.log('参数不是0， 正常执行函数')
      return '参数i不等0， 就是我想要的结果'
    }
    var num = fn(1)
    console.log(num)
1
2
3
4
5
6
7
8
9
10