JavaScript函数的相关知识

㈠函数的简单介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的简单介绍</title>
    <script>
        /*函数function
        *    函数也是一个对象
        *    函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
        *    函数中可以保存一些代码,在需要的时候使用
        * */

        //我们在实际开发中很少使用构造函数来创建一个函数对象
        //创建一个函数
        var fun = new Function("console.log('Hello 这是我的第一个函数');");
        fun();

        /*封装到函数中的代码不会立即执行
        * 函数中的代码会在函数调用的时候执行
        * 调用函数  语法:函数对象()
        * 当调用函数时,函数中封装的代码会按照顺序执行*/

        /*使用 函数声明 来创建一个函数
        *   语法:function 函数名([形参1,形参2...形参N]){
        *                    语句...
        *            }
        * */

        function fun2(){
            console.log("这是我的第二个函数~~~~");
            alert("哈哈哈哈哈哈");
            document.write("┭┮﹏┭┮");
        }
        fun2();   //调用fun2

        /*使用 函数表达式  来创建一个函数
        *    var 函数名 = function([形参1,形参2...形参N]){
        *               语句...
        *        };
        * */

        var fun3 = function(){
            console.log("我是匿名函数中封装的代码");
        };    //注意:一定要加上;号,因为这段代码整个是一个赋值语句
        fun3();

    </script>
</head>
<body>

</body>
</html>

 

㈡函数的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的参数</title>
    <script>
        /*
        * 定义一个用来求两个数和的函数
        *   可以在函数的()中来指定一个或多个形参(形式参数)
        *   多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
        *   但是不赋值
        */

        function sum(a,b){
            console.log(a+b);
        }

        /*在调用函数时,可以在()中指定实参(实际参数)
        *   实参将会赋值给函数中对应形参*/

        sum(123,456);

        /*调用函数时解析器(浏览器)不会检查实参的类型
        *   所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
        * 函数的实参可以是任意的数据类型,也可以是一个对象,也可以是一个函数
        *   当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
        */

        sum(123,"hello");   //结果返回123hello
        sum(true,false);   //结果返回1

        /*调用函数时解析器也不会检查实参的数量
        *    多余实参不会被赋值
        *    如果实参的数量少于形参的数量,则没有对应实参的形参将会是undefined
        */

        sum(123,456,"hello",true,null);  //结果返回579
        sum(123);    //结果返回NaN
    </script>
</head>
<body>

</body>
</html>

 

㈢函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的返回值</title>
    <script>
        /*
        * 创建一个函数,用来计算三个数的和
        *
        * 可以使用 return 来设置函数的返回值
        *   语法: return 值
        *
        *  return后的值将会作为函数的执行结果返回
        *       可以定义一个变量,来接收该结果
        *
        * 在函数中return后的语句都不会执行
        *
        * 如果return语句后不跟任何值就相当于返回一个undefined
        * 如果函数中不写return,则也会返回undefined
        *
        * return后可以跟任意类型的值
        */

        function sum(a,b,c){
            var d = a + b + c;
            return d;
        }

        /*
        * 调用函数
        * 变量result的值就是函数的执行结果
        * 函数返回什么result的值就是什么
        */
        var result = sum(4,5,6);
        console.log("result = " +result);

        //测试alert的返回值
        var result = alert("hello");
        console.log("result = " +result);   //结果:"result = undefined"
        //结论:alert没有返回值

    </script>
</head>
<body>

</body>
</html>

 

㈣返回值的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回值的类型</title>
    <script>

        //break与return的区别
        function fun(){
            alert("函数要执行了~~~~~");

            for(var i=0;i<5;i++){

                if(i == 2){
                    //使用break可以退出当前的循环
                    break; //结果为:0,1  结束循环,接着执行循环后面的语句

                    //continue用于跳过当次循环
                    continue;  //结果为:0,1,3,4,5  循环结束,执行接下来的代码

                    //使用return可以结束整个函数
                    return;   //结果为:后面的语句不再执行
                }
                console.log(i);
            }

            alert("函数执行完了~~~~~");
        }
        fun();

        /*返回值可以是任意的数据类型
        *   也可以是一个对象,也可以是一个函数
        */

        //测试返回值可以是任意的数据类型
        function fun2(){
            return 10;
            return "hello";
            return true;
            return null;
            return undefined;
        }

        var a = fun2();

        console.log("a = "+a);

        //测试返回值是一个对象
        function fun3(){
            var obj = {name:"沙和尚"};
            return obj;
        }

        var b = fun3();
        console.log("b = "+b.name);  //结果返回沙和尚

        //测试返回值可以为一个函数
        function fun4(){
            //在函数内部再声明一个函数
            function fun4(){
                alert("我是fun4");
            }
            fun4();
        }

        fun3();   //结果返回:我是fun4,因为调用fun3等于调用fun4

        function fun4(){
            //在函数内部再声明一个函数
            function fun4(){
                alert("我是fun4");
            }
            //将fun4函数对象作为返回值返回
            return fun4();
        }

        a = fun3();

        console.log(a);
        a();
        fun3()();
        //以上三种形式是一样的效果


        /*在此说明一个知识点:
        *
        * 在调用函数时有以下的知识点:(这里mianji为假设的一个函数名)
        *
        * mianji()
        *   - 调用函数
        *   - 相当于使用的函数的返回值
        *
        * mianji
        *   - 函数对象
        *   - 相当于直接使用函数对象*/

        fun(mianji);    //调用函数对象
        fun(mianji());  //调用函数,也就是调用函数的返回值
    </script>
</head>
<body>

</body>
</html>

 

㈤立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立即执行函数</title>
    <script>
        /*
        * 立即执行函数
        *       函数定义完,立即被调用,这种函数叫做立即执行函数
        *       立即执行函数往往只会执行一次
        */

        //第一种举例如下
        (function(){
            alert("我是一个匿名函数~~~~");
        })();

        //第二种举例如下
        (function(a,b){
            console.log("a = "+a);
            console.log("b = "+b);
        })(123,456);

        //结果返回:"a = 123""b = 456"
    </script>
</head>
<body>

</body>
</html>

 

posted @ 2020-03-03 15:41  石海莹  阅读(239)  评论(0编辑  收藏  举报