函数

最新推荐文章于 2025-04-01 06:45:00 发布

mmsx2017

最新推荐文章于 2025-04-01 06:45:00 发布

阅读量224

点赞数

分类专栏：前端 # JS

本文链接：https://blog.youkuaiyun.com/mmsx2017/article/details/79953888

版权

前端同时被 2 个专栏收录

81 篇文章

订阅专栏

22 篇文章

订阅专栏

使用JavaScript函数，必须有2步：

（1）定义函数；
（2）调用函数；

一、JS函数的定义

在JavaScript中，使用函数前，必须用function关键字来定义函数。

函数常用方式有2种：

（1）不指定函数名的函数；
（2）指定函数名的函数；

1、不指定函数名的函数

函数，就是语句的集体，即语句块。

function(参数1,参数2,….,参数n)
{
    //函数体语句
}

例如：

 <script type="text/javascript">//定义函数
        var myFunction=function()
        {
            document.write("这是一个没有函数名的函数！");
        }//调用函数
        myFunction();
    </script>

2、指定函数名的函数

“指定函数名的函数”是JavaScript中使用最广泛的方法，反而“不指定函数名的函数”用得比较少。

function 函数名(参数1,参数2,….,参数n)
{
//函数体语句
return 表达式;
}

我们在定义函数的时候用到的参数，那就叫“形参”，例如上面的a和b就是形参。我们在调用函数时，与形参对应的数据叫“实参”。

函数的调用

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

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

一、简单调用

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

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

二、在表达式中调用

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

<!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>

效果：
页面中有一个名为提交的按钮，点击后会弹出“绿叶学习网JavaScript入门教程”

四、通过链接调用

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

语法:

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

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

这里使用转义字符“\n”来使得alert()函数的内容换行。

特殊函数

JavaScript特殊函数有3种：

（1）嵌套函数；
（2）递归函数；
（3）内置函数；

一、嵌套函数

嵌套函数，顾名思义，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

二、递归函数

递归函数用于让一个函数从其内部调用其本身。不过需要注意的是，如果递归函数处理不当，就会使程序陷入“死循环”。为了防止“死循环”的出现，可以设计一个做自加运算的变量，用于记录函数自身调用的次数，如果次数太多就让它自动退出循环。

语法：

function 递归函数名(参数1)
{
    递归函数名(参数2)
}

在定义递归函数时，需要2个必要条件：
（1）首先包括一个结束递归的条件；
（2）其次包括一个递归调用的语句；

例题：比较两个数的大小

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function maxNum()
        {
            //获取两个文本框的值
            var x = document.getElementById("num1").value;
            var y = document.getElementById("num2").value;
            //强制转换为数值型
            x = parseFloat(x);
            y = parseFloat(y);
            if(x<y)
            {
                alert("最大数是："+y);
            }
            else
            {
                alert("最大数是："+x);
            }
        }
    </script>
</head>
<body>
    第一个数是：<input type="text" id="num1"/><br/>
    第二个数是：<input type="text" id="num2"/><br/>
    <input type="button" onclick="maxNum()" value="计算"/>
</body>
</html>

document.getElementById()类似于CSS中的id选择器，而document.getElementById(“num1”).value表示选取id为num1的元素并获取它的值。