4.JS-对象-函数

@1932

已于 2022-03-27 16:27:41 修改

阅读量943

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习 html css

于 2022-03-27 16:25:21 首次发布

本文链接：https://blog.csdn.net/Hermione_m/article/details/123775626

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

函数

函数的简介

函数function

函数也是一个对象
- 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
- 函数中可以保存一些代码在需要的时候调用

创建函数对象

可以将要封装的代码以字符串的形式传递给构造函数（构造函数的方法创建函数）
- 例：var fun = new Function("console.log('hello 这是我的第一个函数')");
- 在开发中很少用上面的构造函数的方法创建一个函数对象
使用函数声明来创建一个函数
- 语法:
  - function 函数名([形参1, 形参2,...形参N]){
    
    语句...
    
    }
使用函数表达式来创建一个函数
- 语法：
  - var 函数名 = function([形参1, 形参2,...形参N]){
    
    语句...
    
    }
- 其实就是创建一个匿名函数，并将这个匿名函数赋值给函数名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的简介</title>
    <script>
        /*
            1-用构造函数的方法创建函数对象
        */
        //创建一个函数对象
        //可以将要封装的代码以字符串的形式传递给构造函数
        var fun = new Function("console.log('hello  这是我的第一个函数')");

        console.log(fun);

        //封装到函数中的代码不会立即执行，仅仅是存储在了函数中
        //函数中的代码会在函数调用的时候执行
        //调用函数 语法：函数对象()
        //当调用函数时，函数中封装的代码会按照顺序执行
        fun();


        /*
            2-使用 函数声明 来创建一个函数
                语法:       //下面的中括号写不写都行
                    function 函数名([形参1, 形参2, ...形参N]){
                        语句...(代码)
                    }
        */
        
        // function fun2(){
        //     console.log("这是我的第二个函数~~~");
        // }

        // console.log(fun2);

        // //调用函数
        // fun2();

 
        /*
            3-使用 函数表达式 来创建一个函数
                语法：
                    var 函数名 = function([形参1, 形参2, ...形参N]){
                        语句...
                    }
                其实就是创建一个匿名函数，并将这个匿名函数赋值给函数名
        */
        
        // var fun3 = function(){
        //     console.log("我是匿名函数中封装的代码，和匿名函数一起被赋值给了fun3")
        // }
        //fun3();

    </script>

</head>
<body>
    
</body>
</html>

调用函数

封装到函数中的代码不会立即执行，仅仅是存储在了函数中
- 函数中的代码会在函数调用的时候执行
调用函数：
- 语法：
  - 函数对象();
当调用函数时，函数中封装的代码会按照顺序执行

函数的参数和返回值

参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的参数</title>
    <script>
        /*
            定义一个用来求两个数和的函数
                可以在函数的()中指定一个或者多个形参
                多个形参之间使用","隔开，声明形参就相当于在函数内部声明了对应的变量
                但是并步赋值
        */
    //    var a,b;
       function sum(a,b){
           console.log(a+b);
       }
       /*
            在调用函数的时候，可以在()，中指定实参（实际参数）
                实参将会赋值给函数中对应的形参
       */
       sum(1,2);

       /*
            调用函数时解析器不会检查实参的类型
                例子如：sum(123,"hello");
                所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
                
            函数的实参可以是任意的数据类型
       */
      sum(123,"hello");

      /*
            调用函数时，解析器 也不会检查实参的数量
                多余的实参不hi被赋值
            如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
      */
       sum(123,456,"hello");
    </script>
</head>
<body>
    
</body>
</html>

返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的返回值</title>
    <script>
        /*
            创建一个函数，用来计算三个数的和
            
            可以使用return来设置函数的返回值
                语法：
                    return 值(或变量);
                return 后的值将会作为函数的执行结果返回，
                    可以定义一个变量来接收这个结果
                在函数中return后面的语句都不会执行

                return 后面不跟任何值，相当于   return undefined;不写return 直接输出result结果还是 undefined;

                return 后可以跟任意类型的值
        */
       function sum(a,b,c){
        //    alert(a+b+c);
            var d = a + b + c;
            return d;
            // alret(d);
       }
        //    sum(1,2,3);//d是这条代码的执行结果
       //调用函数
       //变量result的值就是函数的执行结果
       //函数返回什么result的值就是什么
       var result = sum(1,2,3);
       alert(result);

    </script>
</head>
<body>
    
</body>
</html>

使用return 可以结束整个

实参

实参可以是任意的数据类型，也可以是一个对象或者一个函数

区分调用函数和函数对象
- mainji(); 这是调用函数
  - 相当于使用的函数的返回值
- mainji; 这是函数对象
  - 相当于直接使用函数对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数参数练习</title>
    <script>
        /*
            1-定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false
        */
        function isOu(num){
            /*
            if(num % 2 == 0){   //该语句本就是条件判断语句，用来判断条件是true还是false
                return true;
            }else{
                return false;
            }
            */
            
            return num % 2 == 0 ;
        }
        // var shu = prompt("请输入想要判断的数字:")
        // var result = isOu(shu);

        var result = isOu(4);
        console.log("result="+result);


        /*
            2-定义一个函数，可以根据半径计算一个圆的面积， 并返回计算结果
        */
        function mianji(r){
            return 3.14*r*r;
        }
        // var R = prompt("输入你想计算面积的圆的半径：")
        // var result = mianji(R);

        var result = mianji(5);
        console.log("result="+result);


        /*
            3-创建一个函数，可以在控制台中输出一个人的信息
                可以输出人的name age gender address

                实参可以是任意的数据类型，也可以是一个对象
                    当我们的参数过多时，我们可以将参数封装到一个对象中，然后通过对象传递
        */
        function sayHello(o){
            console.log("我是"+o.name+"，今年我"+o.age+"岁了，我是一个"+o.gender+"人，我住在"+o.address);
        }
        var obj = {
            name : "孙悟空",
            age : 18,
            gender :"男",
            address:"花果山"
        };
        sayHello(obj);
        /*
            4-实参也可以是一个函数
        */
        function fun(a){
            console.log("a = "+a);
            // a(obj);  //在函数内部再进行调用
        }
        // fun(123);
        fun(sayHello);
        // fun(function (){alert ="hello"});    //这种形式也会经常见到  

    </script>
</head>
<body>
    
</body>
</html>

返回值的类型

返回值可以是任意的数据类型，也可以是一个对象或者一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回值的类型</title>
    <script>
        function fun(){
            alert("函数要执行了~~~");
            for(var i =0;i<5;i++){
                console.log(i);
            }
            alert("函数执行完了~~~");
        }
        fun();

        /*
            返回值可以是任意的数据类型
                也可以是一个对象,也可以是一个函数
        */
        function fun2(){
            //返回一个对象
            return {name:"沙和尚"};
        }
        var a = fun2();
        console.log("a = "+a.name);

        function fun3(){
            //在函数内部再声明一个函数
            function fun4(){
                alert("我是fun4");
            }
            fun4();
        }
        fun3();
    </script>

</head>
<body>
    
</body>
</html>

立即执行函数

其实用到的是对于匿名函数的调用，基本使用一次过后就无效了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //调用函数
        //函数对象();
        //调用匿名函数，用小括号包含匿名函数整体，使其作为一个整体对象直接调用
        /*
            立即执行函数
                函数定义完，立即被调用，这种函数叫做立即执行函数
                立即执行函数往往只会执行一次
        */
        (function (){
            alert("我是一个匿名函数~~");
        })();
        
        (function(a,b){
            alert("a = "+a);
            alert("b ="+b);
        })(123,456);
    </script>
</head>
<body>
    
</body>
</html>

call() 和 apply() 方法

这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call() 和 apply()都会调用函数执行
在调用call和apply()可以将一个对象指定为第一个参数
- 此时这个对象将会成为函数执行时的作用域
- 该方法可以直接指定函数执行时的 this
call()方法可以将实参在对象之后依次传递（允许一个一个传）
apply()方法则需要将想传的实参封装到一个数组中统一传递

this的情况，

以函数形式调用时，this 永远都是 window
以方法的形式调用时，this 是调用方法的对象
以构造函数的形式调用时，this 是新创建的那个对象
使用call和apply调用时，this 是指定的那个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数的方法</title>
    <script>
        /*
            call()和apply()
                - 这两个方法都是函数对象的方法，需要通过函数对象来调用
                - 当对函数调用call()和apply()都会调用函数执行
                - 在调用call和apply()可以将一个对象指定为第一个参数
                    此时这个对象将会成为函数执行时的htis
                    该方法可以直接指定函数执行时的this
                - call()方法可以将实参在对象之后一次传递（允许一个一个传）
                - apply()方法则需要将想传的实参封装到一个数组中统一传递
            
            - this的情况，
                1.以函数形式调用时，this永远都是window
                2.以方法的形式调用时，this是调用方法的对象
                3.以构造函数的形式调用时，this是新创建的那个对象
                4.使用call和apply调用时，this是指定的那个对象

        */

        /*
            -1-
        */
        function fun(){
            // alert("我是fun函数！！");
            // alert(this);
        }
        // -1-
        // fun.call();
        // fun.apply();
        // fun();
        
        function fun2(a,b){
            console.log("a = "+a);
            console.log("b = "+b);
        }

        
        var obj = {
            name:"obj",
            sayName :function(){
                alert(this.name);
            }
        };
        var obj2 = {
            name:"obj2"
        }

        //-2-
        // fun.call(obj);
        // fun();

        //-3-
        // obj.sayName();
        // obj.sayName.apply(obj2);

        fun2.call(obj,2,3);
        // fun2.apply(obj,2,3);
        fun2.apply(obj,[4,5]);

    </script>
</head>
<body>
    
</body>
</html>

arguments

在调用函数时，浏览器每次都会传递两个隐含的参数，
1. 函数的上下文对象 this
2. 封装实参的对象 arguments
  1. arguments 是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度。
  2. 在调用函数时，哦我们所传递的实参都会在arguments中保存
  3. arguments.length可以用来获取实参的长度
  4. 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
    1. arguments[0]表示第一个实参
    2. arguments[1]表示第二个实参。。。
  5. 它里边有一个属性叫做callee,
    1. 这个属性对应一个函数对象，就是当前正在指向的函数的对象

@1932

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.JS-对象-函数

目录函数函数的简介函数function创建函数对象调用函数函数的参数和返回值参数返回值实参返回值的类型立即执行函数call() 和 apply() 方法arguments函数函数的简介函数function函数也是一个对象函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）函数中可以保存一些代码在需要的时候调用创建函数对象可以将要封装的代码以字符串的形式传递给构造函数（构造函数的方法创建函数）例：var f
复制链接

扫一扫