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

在函数这个方面,JavaScript跟其他编程语言(如C、Java等)有很大不一样。JavaScript函数调用方式很多,常见有4种。

    一、直接调用

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

    语法:

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

    说明:

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

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //定义函数 function getMes() { document.write("听说泰国人很大方,一见面就说:刷我滴卡。"); } //调用函数 getMes(); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

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

    二、在表达式中调用

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

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> //定义函数 function addSum(a, b) { var sum = a + b; return sum; } //调用函数 var n = addSum(1, 2) + 100; document.write(n); </script> </head> <body> </body> </html>

    浏览器预览效果如图所示。

    分析:

    从“var n = addSum(1, 2) + 100;”这句代码可以看出,函数是在表达式中调用的。这种调用方式,一般只适用于有返回值的函数,然后函数的返回值会作为表达式的一部分参与运算。

    三、在超链接中调用

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

    语法:

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

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function expressMes() { alert("她:我爱helicopter。\n我:oh~my,= =?!"); } </script> </head> <body> <a href="javascript:expressMes()">表白对话</a> </body> </html>

    浏览器预览效果如图所示。

    当我们点击了超链接之后,就会调用函数expressMes(),预览效果如图所示。

    分析:

    这里使用转义字符\n来实现alert()方法中文本的换行。alert()和document.write()这两个方法的换行方式是不一样的,忘记了的小伙伴记得翻一下我们之前学过的“2.7 转义字符”这一节。

    四、在事件中调用

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

    看到这里,估计不少小伙伴就感到懵了,因为压根儿就不知道事件是怎么一回事。概念不理解、代码看不懂都没关系的,这里我们只是先给大家讲一下有“在事件中调用函数”这么一回事,以便有个流程的学习思路。对于事件操作,我们在后面再给大家详细介绍。

    举例:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function alertMes() { alert("绿叶,给你初恋般的感觉~"); } </script> </head> <body> <input type="button" onclick="alertMes()" value="提交" /> </body> </html>

    默认情况下,预览效果如图所示。

    当我们点击“提交”按钮后,会弹出对话框,此时预览效果如图所示。

    分析:

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