4、js——函数

一、函数简介

        <script type="text/javascript">
            
            /*
             * 函数 function
             *     - 函数也是一个对象
             *     - 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
             *     - 函数中可以保存一些代码在需要的时候调用
             *     - 使用typeof检查一个函数对象时,会返回function
             */
            
            //-------------------------------------------------------------------------------
            
            //我们在实际开发中很少使用构造函数来创建一个函数对象
            //创建一个函数对象
            //可以将要封装的代码以字符串的形式传递给构造函数
            
            //1.使用构造函数,这种方式不好,开发基本上不使用
            var fun = new Function("console.log('Hello 这是我的第一个函数');");
            
            //封装到函数中的代码不会立即执行
            //函数中的代码会在函数调用的时候执行
            //调用函数 语法:函数对象()
            //当调用函数时,函数中封装的代码会按照顺序执行
            
            fun();//Hello 这是我的第一个函数
            
            //函数对象具有所有普通对象的功能,但要更强大,里面可以封装可执行的代码
            fun.hello = "你好";
            console.log(fun.hello); //你好
            
            
            //----------------------------------------------------------------------
            /*
             * 使用 函数声明 来创建一个函数
             *     语法:
             *         function 函数名([形参1,形参2...形参N]){
             *             语句...
             *         }
             */
            
            //2.使用 函数声明 
            function fun2(){
                console.log("这是我的第二个函数~~~");
                alert("哈哈哈哈哈");
                document.write("~~~~(>_<)~~~~");
            }
            
            console.log(fun2);
            //调用fun2
            fun2();
            
            
            //----------------------------------------------------------------------
            
            /*
             * 使用 函数表达式 来创建一个函数
             * var 函数名  = function([形参1,形参2...形参N]){
             *      语句....
             *  }
             */
            
            //3.使用 函数表达式,就是创建一个匿名函数,将这个匿名函数赋值给一个变量
            var fun3 = function(){
                console.log("我是匿名函数中封装的代码");
            };
            
            fun3();//我是匿名函数中封装的代码
            
            
        </script>

二、函数的参数

        <script type="text/javascript">
            
            /*
             * 定义一个用来求两个数和的函数
             *     可以在函数的()中来指定一个或多个形参(形式参数)
             *     多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
             *     但是并不赋值
             */
            
            function sum(a,b){
                console.log("a = "+a);
                console.log("b = "+b);
                console.log(a+b);
            }
            
            /*
             * 在调用函数时,可以在()中指定实参(实际参数)
             *     实参将会赋值给函数中对应的形参
             */
            sum(1,2);//3
            sum(123,456);//579
            
            
            /*
             * 调用函数时解析器不会检查实参的类型,
             *     所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
             * 函数的实参可以是任意的数据类型
             */
            sum(123,"hello"); //123hello
            sum(true , false);//1
            
            
            /*
             * 调用函数时,解析器也不会检查实参的数量
             *     多余实参不会被赋值
             * 如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
             * 
             */
            sum(123,456,"hello",true,null);//579
            
            sum(123);//a = 123 b = undefined NaN
            
        </script>

三、函数的返回值

        <script type="text/javascript">
            
            
            /*
             * 创建一个函数,用来计算三个数的和
             * 
             * 可以使用 return 来设置函数的返回值
             *     语法:
             *         return 值
             * 
             *     return后的值将会会作为函数的执行结果返回,
             *         可以定义一个变量,来接收该结果
             * 
             *  在函数中return后的语句都不会执行
             * 
             *     如果return语句后不跟任何值就相当于返回一个undefined,
             *     如果函数中不写return,则也会返回undefined
             * 
             *     return后可以跟任意类型的值
             * 
             */
            
            function sum(a , b , c){
                
                var d = a + b + c;
                
                return d;
                
                //return undefined;
                
            }
            
            //调用函数
            //变量result的值就是函数的执行结果
            //函数返回什么result的值就是什么
            var result = sum(4,7,8);
            console.log("result = "+result);//19
            
            
            var result2 = alert("hello");
            console.log("result2 = "+result2);//undefined,说明alert()是没有返回值的
            
        </script>

四、实参可以是任何值

        <script type="text/javascript">
            
            /*
             * 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false
             */
            
            function isOu(num){
                return num % 2 == 0;
            }
            var result = isOu(15);
            console.log("result = "+result); //false
            
            
            /*
             * 定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果
             * 3.14*r*r
             */
            function mianji(r){
                return 3.14*r*r;
            }
            result = mianji(5);
            console.log("result = "+result);//78.5
            
            //--------------------------------------------------------------------------------
            
            /*
             * 创建一个函数,可以在控制台中输出一个人的信息
             *     可以输出人的 name age gender address
             * 
             * 
             * 实参可以是任意的数据类型,也可以是一个对象
             *     当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
             */
            function sayHello(o){
                
                console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
            
            }
            
            //创建一个对象
            var obj = {
                name:"孙悟空",
                age:18,
                address:"花果山",
                gender:"男"
                
            };
            
            sayHello(obj);//我是孙悟空,今年我18岁了,我是一个男人,我住在花果山
            
            //--------------------------------------------------------------------------------
            
            /*
             * 实参可以是一个对象,也可以是一个函数
             */
            
            function fun(a){
                console.log("a = "+a);
                a(obj);//我是孙悟空,今年我18岁了,我是一个男人,我住在花果山
            }
            fun(sayHello); 
            
            
            fun(function(){alert("hello")});//a = function (){alert("hello")}
            
            
            fun(mianji);
            
            /*
             * mianji()
             *     - 调用函数
             *     - 相当于使用的函数的返回值
             * 
             * mianji
             *     - 函数对象
             *     - 相当于直接使用函数对象
             */
            
        </script>

五、返回值的类型

        <script type="text/javascript">
            
            function fun(){
                alert("函数要执行了~~~~");
                for(var i=0 ; i<5 ; i++){
                    if(i == 2){
                        //使用break可以退出当前的循环
                        //break;//0 1 2
                        
                        //continue用于跳过当次循环
                        //continue;//0 1 3 4
                        
                        //使用return可以结束整个函数
                        //return;//0 1
                        
                    }
                    console.log(i);
                }
                alert("函数执行完了~~~~");
            }

            fun();
            
            //--------------------------------------------------------------------------------
            
            /*
             * 返回值可以是任意的数据类型
             *     也可以是一个对象,也可以是一个函数
             */
            function fun2(){
                //返回一个对象
                return {name:"沙和尚"};
                
            }
            
            var a = fun2();
            
            console.log("a = "+a);//a = [object Object]
            
            //-----------------------------------------------------------------
            
            function fun3(){
                //在函数内部再声明一个函数
                function fun4(){
                    
                    alert("我是fun4");
                }
                
                //将fun4函数对象作为返回值返回
                return fun4;
            }
            
            a = fun3();
            console.log(a);
            
            //a();
            fun3()();//和a();其实是一样的

        </script>

六、立即执行函数

        <script type="text/javascript">
            
            
            //函数对象()
            /*
             * 立即执行函数
             *     函数定义完,立即被调用,这种函数叫做立即执行函数
             *     立即执行函数往往只会执行一次
             */
            
            (function(){
                alert("我是一个匿名函数~~~");
            })();
            
            
            (function(a,b){
                console.log("a = "+a); //a = 123
                console.log("b = "+b); //b = 456
            })(123,456);

        </script>

 

posted @ 2020-05-07 23:31  Arbitrary233  阅读(176)  评论(0编辑  收藏  举报