JavaScript函数的定义和调用（附带实例，新手必看）

函数是具有某种特定功能代码块的封装体。详细地说，函数就是封装了一些功能代码，当需要的时候可以多次调用函数，它的作用就是实现了代码的复用。

JavaScript函数的定义

对于定义函数，常见的有两种方式，分别是函数声明、函数表达式。下面将对这两种定义方式依次展开介绍。

1) 函数声明

在 JavaScript 中使用 function 关键字来进行函数定义，语法格式如下：

function 函数名(参数 1, 参数2,...){
    代码块（函数体）;
}

function 在英文中是“功能、函数”的意思，表示其内部封装了一个功能。

function 关键字后面是函数的名称，比如 function total(){}，它的函数名称就是 total，也常叫作 total 函数。函数的名称需要符合标识符命名规范，只能由字母、数字、下画线、美元符号组成，不能以数字开头等。

函数名后的圆括号用来书写函数的参数，也叫作形式参数（简称形参）。形参相当于函数中定义的局部变量，需要在调用函数时传入参数的具体数据。形参的个数可多可少，一个函数可以有多个形参，也可以没有形参。圆括号中可以使用逗号来分隔形参，比如“（a, b, c, d）”。但是需要注意的是，无论圆括号中是否存在参数，都要书写圆括号。

需要注意的是，JavaScript 函数中参数的定义无须表明其类型，且对于形参的个数更加随意，传入参数的个数和声明的参数个数不相等也是可以的。例如，声明三个参数，可以传入2个或者4个都是可以的，但为了代码的可读性和维护性，建议实参个数和形参个数保持一致。

// 函数 total 指定两个形参
function total(a, b) {
    console.log("该函数为有参函数，参数的值为：" + "a=" + a + ", b=" + b);
}

// 函数 total 不指定形参
function total() {
    console.log("该函数为无参函数");
}

花括号中用来书写功能性代码，也被叫作函数体。

通常函数体内需要书写 return关键字来返回值，简单地说，return 关键字后面的值，最终要返回给函数调用表达式。与 Java 代码不同，即便函数有返回值，也无须指定返回值类型。

function total(a, b) {
    sum = a + b;
    return sum;
}

const result = total(1, 2);
console.log(result);   // 3

代码中定义了函数 total，函数体内计算了形参 a 和形参 b 的和，最后使用 return 将结果返回。调用函数后返回结果为“3”。注意，函数调用的结果就是函数体内 return 的结果值。

如果 return 关键字后面不写值，就会返回默认值“undefined”。JavaScript 也允许函数体内没有 return 关键字，此时返回的同样是函数默认的返回值“undefined”。

将函数体内 return 关键字的使用情况总结为以下三种情况：

如果函数没有显式地使用 return 语句，那么函数有默认的返回值，为 undefined。
如果函数使用了 return 语句，但是 return 后没有值，则返回值为 undefined。
如果函数使用了 return 语句，return 后有值，则 return 后面的值为函数的返回值。

需要注意的是，当函数使用了 return 语句后，这个函数在执行完 return 语句之后停止并立即退出，也就是说 return 后面的所有代码都不会再执行。

在实际开发中推荐的做法是，要么让函数始终都返回一个值，否则就不要写返回值。

2) 函数表达式

使用函数表达式方式，不再是在 function 关键字后定义函数名，而是通过 var 关键字来声明函数名称，其余部分与函数声明定义的语法相同。

var 变量名(函数名) = function(参数 1, 参数2,...){
    代码块（函数体）;
}

将函数声明式定义改为函数表达式定义，示例代码如下：

var total = function(a, b){
     return a + b;
}
console.log(typeof total);

其实不管使用哪种方式定义函数，本质上都是定义了一个变量，然后将函数数据赋值给这个变量。

需要注意的是，函数在定义时是不会自动执行的，只有在调用函数的时候才会执行函数。

JavaScript函数的调用

了解了如何定义函数后，下面分别通过函数声明和函数表达式两种不同的方式定义两个函数，来演示几种不同的函数调用情况。

<script>
    // 函数的定义
    // 1. 函数声明
    function fun01(a, b) {
        console.log("fun01 函数参数的值为：" + "a=" + a + ", b=" + b);
    }
    // 2. 函数表达式
    var fun02 = function (a, b) {
        console.log("fun02 函数参数的值为：" + "a=" + a + ", b=" + b);
    }
    // 函数调用
    // 1. 两个类型相同的实参
    fun01(1, 2);       // fun01 函数参数的值为：a=1,b=2

    // 2. 两个类型不同的实参
    fun01(1, "atguigu");  // fun01 函数参数的值为：a=1,b=atguigu

    // 3. 缺少一个实参
    fun01(1);           // fun01 函数参数的值为：a=1,b=undefined

    // 4. 传入三个实参
    fun01(1, 2, 3);     // fun01 函数参数的值为：a=1,b=2

    // fun02 函数调用时和 fun01 一致
    fun02(1, 2);        // fun02 函数参数的值为：a=1,b=2
    fun02(1, "atguigu"); // fun02 函数参数的值为：a=1,b=atguigu
    fun02(1);          // fun02 函数参数的值为：a=1,b=undefined
    fun02(1, 2, 3);    // fun02 函数参数的值为：a=1,b=2
</script>

综上所述，在 JavaScript 中，对于函数要传递的参数，其个数和数据类型都是比较随意的。如果传入的实参少于形参，缺少的实参值为 undefined；如果传入的实参多于形参，结果只传入对应的实参个数，并不会影响函数的正常调用。

JavaScript函数的定义和调用（附带实例，新手必看）