Javascript 函数调用讲解

缺乏、安全感 2024-02-17 13:06 25阅读 0赞

## Javascript 函数调用讲解 ##

**目录**

Javascript 函数调用讲解

一、简单调用

二、在表达式中调用

三、在事件响应中调用

四、通过链接调用

--------------------

从上一节“[JavaScript函数的定义][JavaScript]”我们知道，如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的。那么这节课我们来给大家讲解一下如何调用JavaScript函数。

这一节非常重要，如果你曾经学过其他编程语言（如C和Java），觉得JavaScript函数大同小异的话，那你就错了。JavaScript函数跟其他编程语言函数最大的区别就在于它调用方式很多，而且很灵活。

常用的函数调用方式有4种：

*  （1）简单调用；
 *  （2）在表达式中调用；
 *  （3）在事件响应中调用；
 *  （4）通过链接调用；

下面，我们给大家详细介绍一下这4中函数调用方式。

### 一、简单调用 ###

JS函数简单调用，也被称为直接调用。该方法一般比较适用于没有返回值的函数。也就是说相当于执行函数中的语句集合。

语法：

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

这里讲解是调用函数的方式，不是定义函数的方式，别搞混了。如何定义函数，我们在上一节已经详细讲解了，大家要是忘了的话，记得回去翻翻。

调用函数时的实参取决于定义函数时的形参。

举例：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            //定义函数
            function alertSum()
            {
                //计算1+2+3+…+10的和
                var sum=0;
                for(var i=1;i<=10;i++)
                {
                    sum=sum+i;
                }
            alert(sum);
            }
            //调用函数
            alertSum();
        </script>
    </head>
    <body>
    </body>
    </html>

在浏览器预览效果如下：

![c179193b9fe77637b80a11211205f10d.png][]

### 二、在表达式中调用 ###

在表达式中调用函数的方式，一般适用于有返回值的函数，然后函数的返回值参与表达式的计算。通常该方式还会和输出语句（如document.write()、alert()等）搭配使用。

举例：判断给定的年份是否闰年

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            //定义函数
            function isLeapYear(year)
            {
                //判断闰年的条件
                if((year%4==0)&&(year%100!=0)||(year%400==0))
                {
                    return year+"年是闰年";
                }
                else
                {
                    return year+"年不是闰年";
                }
            }
            //调用函数
            document.write(isLeapYear(2015));
        </script>
    </head>
    <body>
    </body>
    </html>

在浏览器预览效果如下：

![1bf5ca710de648147f83bbfa540903fe.png][]

可能学到这里，初学者对函数还不是很了解，不过我们可以从课程的例子好好琢磨思考一下，然后再加上我们提供的训练题，很快你就能掌握了。

### 三、在事件响应中调用 ###

JavaScript是基于事件模型的程序语言，页面加载、用户点击、移动光标等都会产生事件。当事件产生时，JavaScript就可以调用某个函数来针对这个事件做出响应。

额，初学者可能学到这里就有懵了，因为不知道啥是事件。没关系，那么久了我都那么照顾大家，这次也不例外。不懂没关系，在这里，我们只是先给大家讲一下有“在事件响应中调用函数”这么一回事，免得到后期我们还得独立章节来讲解这个知识点，搞得教程凌乱。

对于JavaScript事件响应问题，我们在后续章节会给大家详细讲解。

举例：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function alertMes()
            {
                alert("码农教程JavaScript入门教程");
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="alertMes()" value="提交"/>
    </body>
    </html>

在浏览器预览效果如下：

![b407be31fb83a3f41558cd6809f0ebec.png][]

我们点击按钮就会弹出对话框，效果如下：

![aa2de1ffef6a4d051131a87bd8206713.png][]

这就是所谓的在事件响应中调用函数，这种方式非常实用。上面实例中的事件是“鼠标的点击事件”。

### 四、通过链接调用 ###

函数除了可以在事件响应中调用外，还可以通过超链接来调用函数。

语法：

说明：在超链接中调用函数，指的就是在a标签的href属性中使用“javascript:函数名”来调用函数。当用户点击该超链接时，就会执行调用的相应函数。

举例：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function mes()
            {
                alert("她：我爱helicopter。\n我：oh~my，= =?!");
            }
        </script>
    </head>
    <body>
        <a href="javascript:mes()">表白对话</a>
    </body>
    </html>

在浏览器预览效果如下：

![9a0f9d243fcedad707bf311a73dec20e.png][]

当我们点击了超链接之后，就会调用函数mes()，效果如下：

![36aeacccc8e919c5ce0e49bbc1a473b8.png][]

分析：这里使用转义字符“\\n”来使得alert()函数的内容换行。大家别忘了JavaScript转义字符喔。

[JavaScript]: http://www.manongjc.com/javascript/js_function_define.html
[c179193b9fe77637b80a11211205f10d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/6b24500ef4f64aa1a7f1028709ba6338.png
[1bf5ca710de648147f83bbfa540903fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/322384fab70b48a2839c3cc5e1dab5c9.png
[b407be31fb83a3f41558cd6809f0ebec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/17bccac82a83403b93160e0074567b72.png
[aa2de1ffef6a4d051131a87bd8206713.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/90f28a62efa747f4803d4a5610a6b520.png
[9a0f9d243fcedad707bf311a73dec20e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/fd31d4bd439d4aac969b124feb140ae9.png
[36aeacccc8e919c5ce0e49bbc1a473b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/15c95b3dbff94e4686c26b4d627347af.png