JavaScript 函数调用

在 JavaScript 中，如果一个函数仅仅是定义而没有被调用的话，那么函数本身是不会执行的（认真琢磨这句话，非常重要）。我们都知道 JavaScript 代码是从上到下执行的，JavaScript 遇到函数定义部分会直接跳过（忽略掉），然后只有遇到函数调用才会返回去执行函数定义部分。也就是说，函数定义之后只有被调用才有意义。

在函数这个方面，JavaScript 跟其他编程语言（如 Python、C、Java 等）有很大不一样。JavaScript 函数调用方式很多，常见有以下 4 种。

直接调用函数。
在表达式中调用函数。
在超链接中调用函数。
在事件中调用函数。

直接调用函数

在 JavaScript 中，直接调用是常见的函数调用方式，一般用于 “没有返回值的函数”。

语法：

函数名(实参1, 实参2, ... , 实参n);

说明：

从外观上来看，函数调用与函数定义是非常相似的，大家可以对比一下。一般情况下，函数定义有多少个参数，函数调用时就有多少个参数。

示例 1：

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        // 定义函数
        function getMes() {
            console.log("听说泰国人很大方，一见面就说：刷我滴卡！");
        }

        // 调用函数
        getMes();
    </script>
</body>
</html>

运行结果如下。

听说泰国人很大方，一见面就说：刷我滴卡！

分析：

可能有些小伙伴会有疑问： “为什么这里的函数没有参数呢？” 其实函数不一定都有参数的。如果我们在函数体内不需要用到传递过来的数据，就不需要参数。有没有参数，或者有多少个参数，都是根据实际开发需求来决定的。

在表达式中调用函数

在 JavaScript 中，“在表达式中调用函数” 一般用于 “有返回值的函数”，该函数的返回值会参与表达式的计算。

示例 2：

运行代码

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

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

运行结果如下。

分析：

const result = getSum(10, 20) + 100;

从上面这句代码可以看出，函数是在表达式中调用的。这种调用方式一般只适用于有返回值的函数，然后函数的返回值会作为表达式的一部分参与运算。

在超链接中调用函数

在 JavaScript 中，“在超链接中调用函数” 指的是在 a 标签的 href 属性中使用 “javascript:函数名” 的形式来调用函数。当用户点击超链接时，就会调用该函数。

语法：

<a href="javascript:函数名"></a>

说明：

需要清楚的是，虽然这种方式可以调用函数，但在现代开发中，我们极其不推荐这样做。更好的做法是给 a 标签添加 onclick 事件。对于这种方式，我们简单了解即可。

示例 3：

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        function express(){
            alert("我爱绿叶！");
        }
    </script>
    <a href="javascript:express()">表白</a>
</body>
</html>

默认情况下，页面效果如下图 1 所示。。当单击超链接时，会弹出一个对话框，如下图 2 所示。

在超链接中调用函数效果（1）

在超链接中调用函数效果（2）

在事件中调用函数

JavaScript 是基于 “事件” 的一门语言，像鼠标移动是一个事件、鼠标单击也是一个事件，类似的事件很多。当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。

JavaScript 事件是一个非常复杂的概念，初学的小伙伴暂时不用管，在后面章节我们会详细给大家介绍。

示例 4：

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        function welcome(){
            alert("欢迎来到绿叶网！");
        }
    </script>
</head>
<body>
    <button type="button" onclick="welcome()">欢迎</button>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当我们单击【欢迎】按钮之后，会弹出一个对话框，如下图 2 所示。

在事件中调用函数效果（1）

在事件中调用函数效果（2）

分析：

这种在事件中调用函数，在后面 “JavaScript 事件” 中我们会接触得非常多，这里简单了解一下即可。