JavaScript 函数、函数封装

1,771 阅读3分钟

一、什么是函数

函数(别称:方法):把实现同一功能的代码块放在一起

二、函数分类

  1. 系统函数(数学对象中的函数,例如生成随机数函数random()、向上/向下取整函数ceil()/floor()、四舍五入函数round()、求次方函数pow()等),系统函数是js定义好的函数,我们直接调用即可。
  2. 用户自定义函数,自定义函数是指用户可以自己声明,并实现预期处理功能的函数。

三、函数的声明、调用

声明语法:function 函数名(){函数体}function 函数名(参数1,参数2,参数3,参数....){函数体}

<script>
    //声明普通函数
    function sum(){   
        console.log("我被使用了");
    }
    //声明只有一个参数的函数
    function sum1(a){
        console.log(a);
    }
    //声明有多个参数的函数
    function sum2(a,b){
        console.log(a+b);
    }
</script>

调用语法:函数名();函数名(参数1,参数2,参数3,参数....);

<script>
    //声明普通函数
    function sum(){   
        console.log("我被使用了");
    }
    //声明只有一个参数的函数
    function sum1(a){
        console.log(a);
    }
    //声明有多个参数的函数
    function sum2(a,b){
        console.log(a+b);
    }
    
    //调用普通函数
    sum();
    //调用只有一个参数的函数
    sum1(25);
    //调用有多个参数的函数
    sum2(25,12);
</script>

函数声明后,必须调用才能被执行,我们将函数比成洗衣机,那这个函数就可以完成洗衣服的功能,但是如果没有人为的操作,洗衣机就无法启动,也就洗不了衣服。所以函数定义后,一定要调用,才会被执行。

四、函数的参数

4.1、函数参数分类

  1. 形式参数(形参) :声明函数时,写在函数名括号中的参数

  2. 实际参数(实参) :调用函数时,写在函数名括号中的参数

参数.png

<script>
    //声明函数
    function sum(a,b){   //a,b就是形参
        console.log(a+b);
    }
    
    //调用函数
    sum(25,30);//25,30就是实参
</script>

参数的传递:函数调用时通过实参将值传递给函数的形参,然后形参将值传递到函数内部。传递方向是实参传递给形参。(注意,形参不能给实参传递值)。

参数.png

五、函数封装的作用&函数封装

函数封装的作用:提高代码的复用性,提升程序的维护性
函数封装的步骤:

  1. 普通的实现功能
  2. 装进function这个壳子中
  3. 取一个名字
  4. 考虑要不要参数---参数可有可无,可以有多个
  5. 调用函数
  6. 写上函数使用说明书(注释)
    1. 函数的功能说明
    2. 函数参数的说明

六、函数返回值

函数封装后,处理的结果,在没有任何操作的情况下,只能在函数内部使用,也就是说函数处理结果,在没有任何操作的情况下是一个局部变量。那么如何在函数外部获取函数处理之后的结果呢?

  1. 可以通过使用全局变量,将函数处理结果赋值给全局变量,然后使用。(缺点,多个函数,就要声明多个全局变量,容易造成内存浪费;如果只有一个或少于函数个数的全局变量,可能造成变量污染)。
  2. 通过return将值抛出来(返回调用函数的地方),好处:不会造成内存浪费。

6.1 return的两种用途

  1. 返回函数处理结果
  2. 结束函数(类似于break。break只能用在判断语句中,return只能用在函数中)

return程序数据流程

return1.png

return在console.log()后面时的情况

return2.png