JavaScript 函数定义

在 JavaScript 中，如果根据是否有返回值来划分，函数可以分 2 种：一种是 “没有返回值的函数”；另外一种就是 “有返回值的函数”。无论是哪一种函数，都必须使用 function 关键字来定义的。

JavaScript 定义 “没有返回值的函数”

在 JavaScript 中，没有返回值的函数，指的是函数执行完就算了，不会返回任何值。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n) {
    ……
}

说明：

JavaScript 中的函数是一个用大括号 “{}” 括起来的、可重复使用的、具有特定功能的语句块。每一个函数，就是独立的语句块（看成一个整体）。用 “{}” 括起来的代码段，我们称之为语句块，像 if、while、do while、for 等语句中也有。对于语句块来说，我们都是把它当成整体来处理的。

函数跟变量是非常相似的，变量用 let 或 const 来定义，而函数用 function 来定义。变量需要取一个变量名，而函数也需要取一个函数名。在定义函数的时候，函数名不要随便取，尽量取有意义的英文名，让人一看就知道这个函数是干什么的。

对于函数的参数，是可以省略的（即不写），当然也可以是 1 个、2 个或 n 个。如果是多个参数，则参数之间用英文逗号（,）隔开。此外，函数参数的个数，取决于你实际开发的需要。

示例 1：

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        // 定义函数
        function getSum(a, b) {
            const result = a + b;
            console.log(result);
        }

        // 调用函数
        getSum(10, 20);
    </script>
</body>
</html>

运行结果如下。

分析：

JavaScript 函数定义

在上面例子中，我们使用 function 关键字定义了一个名字为 getSum 的函数，该函数用于计算任意两个数之和。函数名是可以随便取的，不过一般取能够表示函数功能的英文名。

“function getSum(a,b){…}” 是函数的定义，这里的 a、b 是参数，也叫 “形参”。参数的名字也是随便取的。初学的小伙伴就会问了：“怎么判断需要多少个参数啊？” 其实这很简单。由于这个函数用于计算任何两个数之和，那肯定就是需要两个参数啦！

getSum(10, 20) 是函数的调用，这里的 10、20 也是参数，叫 “实参”。实际上，函数调用是对应于函数定义的，像 getSum(10, 20) 就刚好对应于 getSum(a, b)，其中 10 对应 a，20 对应 b，因此 getSum(10, 20) 等价于：

function getSum(10, 20) {
    const sum = 10 + 20;
    console.log(sum);
}

也就是说，函数的调用其实就是把 “实参”（即 10 和 20）传递给 “形参”（即 a 和 b），然后把函数执行一遍。

在这个例子中，我们可以改变函数调用的参数，也就是把 10 和 20 换成其他的试试。最后还有一点要说明的：函数如果只有定义部分，却没有调用部分，这是一点意义都没有的。如果函数只定义不调用，则 JavaScript 就会自动忽略这个函数，也就是不会执行这个函数。函数只有调用的时候，才会被执行。

JavaScript 定义 “有返回值的函数”

在 JavaScript 中，有返回值的函数指的是函数执行完了之后，会返回一个值。这个返回值可以供我们使用。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n) {
    ……
    return 返回值;
}

说明：

“有返回值的函数” 相对 “没有返回值的函数” 来说，只是多了一个 return 语句罢了。return 语句就是用来返回一个结果。

示例 2：

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        // 定义函数
        function getSum(a, b) {
            const result = a + b;
            return result;
        }

        // 调用函数
        const n = getSum(10, 20) + 100;
        console.log(n);
    </script>
</body>
</html>

运行结果如下。

分析：

这里我们使用 function 定义了一个名为 “getSum” 的函数，这个函数跟上一个例子的函数功能是一样的，也是用来计算任何两个数之和。唯一不同的是，这个 getSum() 函数会返回相加的结果。

为什么要返回相加的结果呢？因为这个相加结果在后面要用啊！现在小伙伴终于知道什么时候该用 return，什么时候不用 return 了吧？

一般情况下，如果后面的程序需要用到函数的计算结果，就要用 return 返回；如果后面的程序不需要用到函数的计算结果，就不用 return 返回。

提示: 在现代前端开发（React、Vue、Node.js）中，我们更多的是使用 “箭头函数（=>）”，而不是传统函数。不过 “箭头函数” 是 ES6 新增的内容，感兴趣的小伙伴可以关注绿叶网未来上线的精品课——ES6 快速上手。