js:函数(声明、参数、返回值、匿名函数、函数的调用)

1、函数

(1)<script>标签的位置

在解析html文件时,如果把script放在头部,遇到script标签,就会先下载html文件,直到下载完所有的script文件。这样会带来一个缺点,造成网页的加载速度缓慢。因此,可以把页面事件的函数放在head中,减少页面的加载时间。

(2)函数

函数是封装了一段可以被重复执行调用的代码块,可以让代码重复使用

2、函数的声明

(1)function  函数名(形式参数)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            function welcome() {
            var num1=23;
            var num2=12;
            console.log(num1+num2)
        }
        </script>
    </head>
    <body onload="welcome()" bgcolor="aquamarine">
    
    </body>
</html>

(2)var  函数名=function(形式参数)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function() {
            var num1=23;
            var num2=12;
            console.log(num1+num2)
        }
        </script>
    </head>
    <body onload="welcome()" bgcolor="aquamarine">
    
    </body>
</html>

welcome是变量名不是函数名,因此,这种声明方式得到的函数也被称为匿名函数。

3、函数的参数

(1)实参的个数和形参的个数相等

<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1) {
            var num2=12;
            console.log(num1+num2)
        }
        </script>
    </head>
    <body onload="welcome(12)" bgcolor="aquamarine">
</html>

 调用函数的参数是形参,声明函数的时候是实参

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            function welcome(name) {
                alert("你好" + name);
            }
        </script>
    </head>

    <body onload="welcome('liu')" bgcolor="aquamarine">
        <center>
            <h1>你好</h1>
        </center>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            function welcome(name) {
                alert("你好" + name);
            }
        </script>
    </head>

    <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
        <center>
            <h1>你好</h1>
        </center>
    </body>

</html>

通过例子可以看出,虽然形参只有一个,但是实参可以传递两个,并且执行的效果是完全相同的。这也反映出了java script与java和c语言的不同,虽然定义的函数是传递一个参数,但是在调用函数时传递的参数的个数是不受限制的。但大多数情况下是可多不可少。

(2)实参的个数多于形参的个数

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1) {
            var num2=12;
            console.log(num1+num2)
        }
        </script>
    </head>
    <body onload="welcome(12,123)" bgcolor="aquamarine">
</html>

 即使实参的个数和形参的个数不相等,也不会报错,函数可以正常执行

(3)函数的实参的个数小于形参的个数

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1,num2) {
            console.log(num1+num2)
        }
        </script>
    </head>
    <body onload="welcome(12)" bgcolor="aquamarine">
</html>

 形参num1有值,但是num2是undefined

(4)arguments实现参数传递

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            function welcome(name) {
                alert("你好" + arguments[0]);
            }
        </script>
    </head>

    <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
        <center>
            <h1>你好</h1>
        </center>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            function welcome(name) {
                alert("你好" + arguments[1]);
            }
        </script>
    </head>

    <body onload="welcome('liu','zhang')" bgcolor="aquamarine">
        <center>
            <h1>你好</h1>
        </center>
    </body>

</html>

可以看出arguments对象类似一个数组,可以重0开始访问实参。它是当前函数的一个内置对象,存储了传递的所有实参。

4、函数的分类:

(1)已经定义了的函数:

  • 提示框:alert()
  • 控制台输出:console.log()

(2)自定义的函数

 5、函数的返回值

(1)普通情况

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome = function() {
                var num1 = 23;
                var num2 = 12;
                num = num1 + num2;
                return num;
            }
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
            console.log(welcome());
        </script>

    </body>

</html>

(2)return只能返回一个值

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1,num2) {
            return num1,num2;
        }
            console.log(welcome(12,123));
        </script>
    </head>
    <body  bgcolor="aquamarine">
</html>

 返回的结果是最后一个值

(3)一次返回多个数据

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1,num2) {
            return [num1-num2,num1*num2,num1+num2];
        }
            console.log(welcome(12,123));
        </script>
    </head>
    <body  bgcolor="aquamarine">
</html>

 数组的形式返回数据

 (4)函数没有返回值则返回undefined

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function(num1,num2) {
            
        }
            console.log(welcome(12,123));
        </script>
    </head>
    <body  bgcolor="aquamarine">
</html>

6、匿名函数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
        !function (){
            num1=2;
            console.log(num1);
        }();
        </script>

    </body>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
        ;(function (){
            num1=2;
            console.log(num1);
        })()
        </script>

    </body>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
        
        </script>
    </head>

    <body bgcolor="aquamarine">
        <script>
        (function (){
            num1=2;
            console.log(num1);
        }())
        </script>

    </body>

</html>

定义时直接执行,只能用一次。

好处:

(1)解决了命名冲突的问题。

(2)实现闭包。

7、一个函数调用另一个函数

<!DOCTYPE html>
<html>
     <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <script type="text/javascript">
            var welcome=function() {
            console.log("我是函数welcome");
            f();
            }
            welcome();
            function f(){
                console.log("我是被调用的函数");
            }
            
        </script>
    </head>
    <body  bgcolor="aquamarine">
</html>

原文地址:https://www.cnblogs.com/zhai1997/p/11421010.html