雅君

2022-04-05 15:40 已编辑山东大学前端工程师

关注

【72】JS(6)——函数①基础

★文章内容学习来源：拉勾教育大前端就业集训营

本篇学习目标：
1.掌握函数的概念;
2.掌握函数定义的基础语法；
3.理解函数参数的设置及优点；
4.会灵活运用返回值。

一、概念

1. 为什么要有函数

如果要在多个地方求某个数的约数个数，应该怎么做？

比如6的约数个数：有3个（1，2，3），如果要在多个地方用“3个”这个结果，难道我们要每次都写一遍求约数并且算出约数个数的代码吗？

2. 概念及作用

函数（function），也叫作功能、方法；
函数可以将一段代码一起封装起来，被封装起来的函数具备某一项特殊的功能，内部封装的一段代码作为一个完整的结构体，要执行就都执行，要不执行就都不执行。
函数的作用就是封装一段代码，将来可以重复使用。

比如之前常用的alert();，prompt();，都是函数，我们不知道其中具体实现其功能的代码是什么，我们只需知道用了相应的语句会实现对应的功能。

二、声明/定义

1. 声明/定义函数的语法

（本篇幅仅讲解基础的定义函数方法，下篇会讲解函数表达式的定义方法）;

函数声明又叫函数定义；
函数声明语法：

function 函数名(参数){
   
	封装的结构体；
}

2. 特点

函数声明的时候，函数体并不会执行;
只有当函数被调用的时候才会执行。

3. 注意

函数名的命名规则与变量的命名规则一致：

可以使用字母、数字、下划线、$；
区分大小写；
不能以数字开头；
不可以使用关键字、保留字。

函数必须先定义然后才能使用。
如果没有定义函数直接使用，会出现一个引用错误。

三、调用

1. 含义及语法

函数调用也叫作函数执行，调用时会将函数内部封装的所有的结构体的代码立即执行。

   函数名();

2. 特点

函数内部语句执行的位置，与函数调用位置有关，与函数定义的位置无关。
函数可以一次定义，多次执行。

3. 举例

     //定义一个函数fun1，实现控制台依次输出12345的功能
    function fun1 () {
   
        console.log(1);
        console.log(2);
        console.log(3);
        console.log(4);
        console.log(5);
    }
    //函数调用
    fun1 ();
    console.log("上面定义了一个函数，并且调用了它，下面再次调用");
    //一次定义，多次调用
    fun1 ();

四、参数

1. 为什么有参数

我们希望函数执行结果不是一成不变的，可以根据自定义的内容发生一些变化。
函数预留了一个接口，专门用于让用户自定义内容，使函数发生一些执行效果变化。

//定义一个函数sum，实现两数相加功能
//其中a,b就是两个参数/接口
function sum (a,b) {
   
    console.log(a + b);
}
//函数调用
sum (5,7); //12

2. 含义及注意事项

接口：就是函数的参数;
函数参数的本质就是变量，可以接收任意类型的数据，导致函数执行结果根据参数不同，结果也不同。
一个函数可以设置 0 个或者多个参数，参数之间用逗号分隔。

3. 参数类型

函数的参数根据书写位置不同，名称也不同：
形式参数：定义的 () 内部的参数，叫做形式参数，本质是变量，可以接收实际参数传递过来的数据。简称形参。
实际参数：调用的 () 内部的参数，叫做实际参数，本质就是传递的各种类型的数据，传递给每个形参，简称实参。

4. 传参

函数执行过程，伴随着传参的过程：

5. 优点

不论使用自己封装的函数，还是其他人封装的函数，只需要知道传递什么参数，执行什么功能，没必要知道内部的结构什么。

一般自己封装的函数或者其他人封装的函数需要有一个 API 接口说明，告诉用户参数需要传递什么类型的数据，实现什么功能。

五、返回值

1. 含义

函数能够通过参数接收数据，也能够将函数执行结果返回一个值。
利用函数内部的一个 return 的关键字设置函数的返回值。

2. return关键字作用

①函数内部如果结构体执行到一个 return 的关键字，会立即停止后面代码的执行；

     //函数定义
     function fun1 () {
   
        console.log(1);
        console.log(2);
        console.log(3);
        return;  //会立即停止后面代码的执行
        console.log(4);
        console.log(5);
    }
    //函数调用
    fun1 ();
    console.log("上面定义了一个函数，并且调用了它，下面再次调用");
    //一次定义，多次调用
    fun1 ();

②可以在 return 关键字后面添加空格，空格后面任意定义一个数据字面量或者表达式，函数在执行完自身功能之后，整体会被 return 矮化成一个表达式，表达式必须求出一个值继续可以参与程序，表达式的值就是 return 后面的数据。

//return作用②矮化成表达式
//定义一个函数sum，实现两数相加功能
function sum (a,b) {
   
    return a + b;
}
//函数调用
console.log(sum (5,7));  //12

3. 注意

如果函数没有设置 return 语句，那么函数有默认的返回值 undefined；
如果函数使用 return 语句，但是 return 后面没有任何值，那么函数的返回值也是 undefined。

4. 应用

函数如果有返回值，执行结果可以当成普通数据参与程序。
函数如果有返回值，可以作为一个普通数据赋值给一个变量，甚至赋值给其他函数的实际参数。

//函数返回值的应用
function sum(a,b) {
   
    return a+b;
}
//将返回值赋值给变量
var n = sum(3,4);
console.log(n); //7
//将返回值赋值给函数实参
console.log(sum(2,sum(3,4))); //9