JavaScript函数、作用域

最新推荐文章于 2022-04-24 11:23:00 发布

添福宝615

最新推荐文章于 2022-04-24 11:23:00 发布

阅读量185

点赞数

分类专栏：笔记文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_61923897/article/details/120893658

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、arguments使用

<!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>
        // arguments 的使用     只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
        function fn(){
            console.log(arguments);     //里面存储了所有传递过来的实参
            console.log(arguments.length);
            console.log(arguments[2]);

            // 可以按照数组的方式遍历arguments
            for(var i = 0; i< arguments.length; i++){
                console.log(arguments[i]);
            }
        }
        fn(1 ,2,3);
        fn(1,2,3,45,6);
        //伪数组  并不是真正意义上的数组
        // 1、具有数组的length 属性
        // 2、按照索引的方式进行存储
        // 3、它没有真正数组的一些方法 pop()  puosh()  等等
    </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 getMax(){
            var max = arguments[0];
            for(var i = 1; i < arguments.length; i++){
                if(arguments[i] > max){
                    max = arguments[i];
                }
                return max;
            }
        }
        console.log(getMax(1 ,2 ,3));
        console.log(getMax(11 ,2 ,3, 6, 67));
        console.log( getMax(1 ,2334 ,35, 67, 78, 56 ,78,557));
        console.log(getMax(1 ,2 ,37, 90, 67, 673));
     </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>
        // 案例1:利用函数封装方式，翻转任意一个数组   reverse  翻转
        function reverse(arr){
           var  newArr = [];
           for(var i = arr.length-1; i >= 0; i--){
               newArr[newArr.length] = arr[i];
           } 
           return newArr;
        }
        var arr1 = reverse([1,5,6,9,4])
        console.log(arr1);

        var arr2 = reverse([1,55,67,98,4])
        console.log(arr2);

        var arr3 = reverse(['TFBOYS', '王俊凯', '王源', '易烊千玺']);
        console.log(arr3);



        // 案例2∶利用函数封装方式，对数组排序--冒泡排序  sort 排序
        function sort(arr){
            for(var i = 0; i < arr.length; i++){
                for(var j = 0; j< arr.length - i -1; j++ ){
                    if(arr[j] > arr[j + 1]){
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
                
            }
            return arr;
        }

        var arr1 = sort([1,5,7,8,4]);
        console.log(arr1);

        

            //  案例3∶判断闰年
            // 要求︰输入一个年份，判断是否是闰年(闰年∶能被4整除并且不能被100整数，或者能被400整除)
            function isRunYear(year){
                //如果是闰年 ，返回 true   ，否则返回 false
                var flag = false;
                if( year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                    flag = true;
                }
                return flag;
            }
            console.log(isRunYear(2023));
            console.log(isRunYear(2020));
            console.log(isRunYear(2000));
    </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  fn1(){
            console.log(10);
            fn2();   //在 fn1 函数里面调用了 fn2 函数
        }
        fn1();
        function fn2(){
            console.log(22);
           
        }



        function fn1() {
            console.log ( 111);
            fn2();
            console.log ( 'fn1' );
        }
        function fn2(){
            console.log (222);
            console. log ( ' fn2' );
        }
            fn1();
    </script>
</head>
<body>
    
</body>
</html>

han

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

    // 案例4∶用户输入年份，输出当前年份2月份的天数
    // 如果是闰年，则2月份是29天，如果是平年，则2月份是28天
        function backDay(){
            var year = prompt('请您输入年份：');
            if(isRunYear(year)){    //调用函数需要加小括号
                alert('当前年份是闰年，二月份有29天');
            } else{
                alert('当前年份是平年，二月份有28天');
            }
        }
        backDay();





        // 判断是否为闰年的函数
        function isRunYear(year){
                //如果是闰年 ，返回 true   ，否则返回 false
                var flag = false;
                if( year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                    flag = true;
                }
                return flag;
            }
    </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>
        // 函数的2种声明方式
        // 1、利用函数关键字自定义函数（命名函数）
        function fn(){

        }
        fn();

        // 2、函数表达式(匿名函数)
        // var 变量名 = function(){};

        var fun = function(aru){
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun('TFBOYS');

        // (1)fun是变量名不是函数名
        //(2）函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数
        //  (3）函数表达式也可以进行传递参数
    </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>

    // 1.JavaScript作用域:就是代码名字（变量)在某个范围内起作用和效果
    // 目的是为了提高程序的可靠性更重要的是减少命名冲突
    // 2.js的作用域（es6）之前:全局作用域局部作用域

    // 3．全局作用域:整个script标签或者是一个单独的js文件
    var num = 10;
    console.log(num);

    //4．局部作用域（函数作用域）  在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
    function fn() {
        // 局部作用域
        var num = 20;
        console.log(num);
    }
    fn();
    </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>
        // 变量的作用域： 根据作用域的不同，变量分为全局变量和局部变量
        // 1．全局变量:在全局作用域下的变量在全局下都可以使用
        // 注意如果在函数内部没有声明直接赋值的变量也属于全局变量
        var num = 10;    // num就是一个全局变量
            console.log(num);
        function fn() {
            console.log(num);
            }
            fn();
            //  console.log( aru);


        // 2．局部变量―在局部作用域下的变量―后者在函数内部的变量就是局部变量
        //注意:函数的形参也可以看做是局部变量
         function fun(aru) {
            var num1 = 10;       // num1就是局部变量只能在函数内部使用
            num2 = 20;
         }
    </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>
            //js中没有块级作用域﹐js的作用域:全局作用域局部作用域︰现阶段我们js 没有块级作用域1/我们js 也是在es6的时候新增的块级作用域
            //块级作用域{}if {for {}
            //java
            //if(xx){
            //   int num = 10;
            //}
            //外面的是不能调用num的
            if( 3 < 5){
                var num = 10;
            }
            console.log(num);
    </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>
        // 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值这种结构我们称为作用域链   就近原则
        var num = 10;
        function fn(){   //外部函数
            var num  = 20;
            function fun(){    //内部函数
                console.log(num);
            }
            fun();
        }
        fn();
    </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>
        // 案例1∶结果是几?      结果是：123
       function f1(){
           var num = 123;
           function f2(){
               console.log(num);
           }
           f2();
       } 
       var num = 456;
       f1();
    </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>
        // 案例1∶结果是几?      结果是：123
       function f1(){
           var num = 123;
           function f2(){
               console.log(num);
           }
           f2();
       } 
       var num = 456;
       f1();



    //    案例2∶结果是几?
    var a = 1;
    function fn1(){
        var a = 2;
        var b = '22';
        fn2();
        function fn2(){
            var a= 3;
            fn3();
            function fn3(){
                var a= 4;
                console.log(a);   //a的值为：  4

                console.log(b);    //b 的值为：  '22'
            }
        }
    }
    fn1();
    </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>
        // 1问
        // console.log(num);    报错  坑1

        // 2问
        console.log(num);
        var num = 10;     //undefined
        // 相当于执行力以下代码
        var num;
        console.log(num);
        num = 10;

        // 3问   11
        fn();
        function fn(){
            console.log(11);
        }
       

        // 4问   报错 坑2
        fun();
        var fun = function(){
            console.log(22);
        }

        //函数表达式调用必须写在函数表达式的下面
         // 相当于执行力以下代码
         var fun;
         fun();
         fun = function(){
            console.log(22);
        }



        // 1、JS引擎运行js  分为两步： 预解析  代码执行
        // (1)．预解析js引擎会把js里面所有的 var 还有 function提升到当前作用域的最前面
        //(2)．代码执行按照代码书写的顺序从上往下执行
        // 2．预解析分为变量预解析（变量提升）和函数预解析（函数提升)
        //(1）变量提升就是把所有的变量声明提升到当前的作用域最前面﹑不提升赋值操作
        // (2）函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数


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

案例：

1：undefined

2： undefined 20

3： undefined 9

4：9 9 9 9 9 报错

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

        // 案例1∶结果是几?   undefined
        var num = 10;
        fun();
        function fun(){
            console.log(num);
            var num = 20;
        }

        // 相当于执行了以下操作
        var num;
        function fun(){
            var num
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();


        // 案例2∶结果是几?     undefined  20
        var num = 10;
        function fn(){
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();

         // 相当于执行了以下操作   
         var num ;
         function fn(){
            var num;
            console.log(num);
             num = 20;
            console.log(num);
        }
        num = 10;
        fn();


        // 案例3∶结果是几?     undefined  9
        var a= 18;
        f1();
        function f1(){
            var b;
            var a;
            b= 9;
            console.log(a);
            console.log(b);
             a = '123';
        }

         // 相当于执行了以下操作
         var a;
         function f1(){
            var b= 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }
        a= 18;
        f1();


        // 案例4∶结果是几?   9 9 9 9 9 报错

        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1(){
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }

          // 相当于执行了以下操作
          function f1(){
            var a;
            a = b = c = 9;
            // 相当于 var a = 9; b = 9 ; c = 9;  b 和c直接赋值 没有var声明 当全局变量看
            // 集体声明 var a = 9, b = 9, c =9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        // f1();
    </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>
        //  1、利用对象字面量创建对象  {}
        // var obj = {};       //创建了一个空的对象
        var obj = {
            name : '张三丰',
            age : 18,
            sex: '男',
            sayHi:function(){
                console.log('hi~');
            }
        }
        // (1)里面的属性或者方法我们采取键值对的形式  键  属性名 ： 值  属性值  
        //(2)多个属性或者方法中间用逗号隔开的
        //(3)方法冒号后面跟的是一个匿名函数


        // 2、使用对象
        // (1) 调用对象的属性  采取的是： 对象名.属性名
        console.log(obj.name);

        // 调用属性也还有一种方法   对象名['属性名']
        console.log(obj['sex']);

        // (3) 调用对象的方法    对象名.方法名()   千万别忘记添加小括号
        obj.sayHi();
    </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>
        // 练习∶请按照要求写出对象
        /* 请用对象字面量的形式创建一个名字为可可的狗对象。
        具体信息如下:
        ●姓名:可可
        类型(type):阿拉斯加犬●
        年龄:5岁，
        颜色∶棕红色。
        技能:汪汪汪(bark)，演电影(showFilm) */
        var obj = {
            name: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            color : '棕红色',
            sayHi: function(){
                console.log('技能：汪汪汪(bark), 演电影（showFilm）');
            }


        }
        console.log(obj.name);
        console.log(obj['type']);
        console.log(obj.age);
        console.log(obj['color']);
        obj.sayHi();
    </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>
        // 变量、 属性、函数、方法的区别
        // 1、变量和属性的相同点 都是用来存储数据的
        var num = 10;
        var obj = {
            age :18,
            // 方法
            fn:function(){

            }
        }

        // 函数
        function fn(){

        }
        console.log(obj.age);


        //变量单独声明并赋值使用的时候直接写变量名单独存在
        //属性在对象里面的不需要声明的 使用的时候必须是   对象.属性
        


        //2．函数和方法的相同点都是实现某种功能做某件事
        //函数是单独声明， 并且调用的   函数名(）   单独存在的
        //方法  在对象里面   调用的时候 对象.方法()
    </script>
</head>
<body>
    
</body>
</html>

利用new Object创建对象：

<!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>
        // 利用 new Object 创建对象
        var obj = new Object();     //创建了一个空的对象
        obj.uname = '张三丰';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function(){
            console.log('hi~');
        }

        //(1)我们是利用等号=赋值的方法添加对象的属性和方法
        //(2)每个属性和方法之间用分号结束 
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj['sex']);
        obj.sayHi();
    </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>
        // 练习∶请按照要求写出对象
        /* 请用new Object形式创建一个鸣人对象。
        具体信息如下:
        姓名∶鸣人
        性别:男
        年龄:19岁
        技能( skill ):影分身术 */
        var obj = new Object();
        obj.name = '鸣人';
        obj.sex = '男';
        obj.age = '19岁';
        obj.sayHi = function(){
            console.log('技能(skill)：影分身术');
        }
        console.log(obj.name);
        console.log(obj['sex']);
        console.log(obj.age);
        obj.sayHi();
    </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>
        // 利用构造函数创建对象
        // 就是因为前面两种创建对象的方式一次只能创建一个对象
        var wjk = {
            name : '王俊凯',
            age: 22,
            sing:function(){
                console.log('心引力');
            }
        }
        var wy = {
            name : '王源',
            age : 21,
            sing:function(){
                console.log('疯人公园');
            }
        }


        //因为我们一次创建一个对象，里面很多的属性和方法是大量相同的我们只能复制
        //因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数
        //又因为这个函数不一样，里面封装的不是普通代码，而是对象
        //构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面


    </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>
        // 利用构造函数创建对象
        // 需要创建TFBOYS的对象  相同的属性： 名字 年龄 性别   相同的方法 ： 唱歌
        // 构造函数的语法格式
        // function 构造函数名(){
        //     this.属性 = 值;
        //     this.方法= function(){

        //     }
        // }
        // new 构造函数名();

        function Star(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
            
        }
        var wjk =   new Star('王俊凯' , 22, '男');       //调用函数返回的是一个对象  object
        console.log(typeof wjk);
        console.log(wjk.name);
        console.log(wjk.age);
        console.log(wjk.sex);
        wjk.sing('摩天轮的思念');


        var wy = new Star('王源' , 21, '男');
        console.log(wy.name);
        console.log(wy.age);
        console.log(wy.sex);
        wy.sing('疯人公园');

        new Star('王俊凯' , 22, '男');
        new Star('王源' , 21, '男');
        new Star('易烊千玺' , 21, '男');


        // 1、构造函数名字首字母要大写
        // 2、构造哈数不需要return 就可以返回结果
        // 3、调用构造函数 必须使用 new
        // 4、只要 new Star() 调用函数就创建一个对象
        // 5、属性和方法的前面必须添加  this
    </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>

        // 练习:请按照要求创建对象 
        // 利用构造函数创建两个英雄对象。
        // 函数中的公共部分包括:姓名属性(name)，类型属性( type )，
        // 血量属性(blood)和攻击方式( attack )。  
        // 英雄对象的信息如下︰
        // 廉颇力量型500血量攻击:近战
        // 后羿射手型100血呈攻击:远程

        function Hero(name, type, blood){
            this.name = name;
            this.type = type;
            this.blood =blood;
            this.attack =function(attack){
                console.log(attack);
            }
        }
        var lp = new Hero('廉颇', '力量型', '500血量');
        console.log(lp.name);
        console.log(lp.type);
        console.log(lp.blood);
        lp.attack('攻击：近战');

        var hy = new Hero('后羿', '射手型', '1000血量');
        console.log(hy.name);
        console.log(hy.type);
        console.log(hy.blood);
        hy.attack('攻击：远程');
    </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>
        // 构造函数和对象

        // 1、构造对象    明星  泛指的某一大类  类似于 Java语言里面的类(class)
        
        function Star(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
            
        }


        // 2、对象  特指  是一个具体的事物   王源 == {name: "王源" , age： 21 ， sex："男", sing:f}
        var wy = new Star('王源' , 21, '男');
        console.log(wy);
      
        // 利用构造函数创建对象的过程称为对象的实例化
    </script>
</head>
<body>
    
</body>
</html>

new关键字：

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

        // new关键字执行过程
         //1. new构造函数可以在内存中创建了一个空的对象
         // 2. this就会指向刚才创建的空对象
         //3．执行构造函数里面的代码给这个空对象添加属性和方法
         //4．返回这个对象
          function Star(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
            
        }
        var wy = new Star('王源' , 21, '男');
    </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>
        // 遍历对象
        var obj = {
            name : '王俊凯',
            age:22,
            sex: '男 ',
            fn:function(){
                
            }

        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);

        // for...in  遍历我们的对象
        // for(变量 in 对象){

        // }

        for(var k in obj){
            console.log(k);     // k 变量输出  得到的是属性名
            console.log(obj[k]);      // object[k]   得到的是属性值
        }

        // 我们使用 for...in 里面的变量， 喜欢写 k 或者 key
    </script>
</head>
<body>
    
</body>
</html>