JavaScript 的 对象

学习目标：可以说出为何须要对象

                  可以使用字面量建立对象

                  可以使用构造函数建立对象

                  可以说出new的执行过程

                  可以遍历对象

1.对象

     1.1万物皆对象，对象是一个具体的事物 在程序里面，一个服务器，一张网页，一个远程服务器的链接也能够是对象。

      Javascript中对象是一组无序的相关属性和方法的集合，全部事物都是对象，例如字符串，数值，数组，函数。

      对象是由属性和方法组成的

      属性：事物的特征，在对象中用属性来表示。（经常使用名词）

      方法: 是事物的行为，在对象中用方法来表示  （经常使用动词）

       1.2为何须要对象

       保存一个值，可使用变量，保存多个值（一组值），可使用数组，若是要保存一我的的完整信息呢？

       js二点对象表达结构更清晰，更强大。张三峰的我的信息再对象中表达结构以下：

        张三峰.姓名 = '张三峰';

        张三峰.性别 = ’男‘;

        张三峰.年龄 = 128;

        张三峰.身高 = 154;

2.建立对象的三种方法：（object）:

       利用字面量建立对象： 花括号{ }表达了具体事物(对象)的属性和方法

       利用 new object建立对象

       利用构造函数建立对象

字面量建立对象实例：

     var obj = {
           uname:'张三峰',
           age: 18,
           sex: '男',
           sayHi: function(){
               console.log('hi-');
           }
       }

New Object 建立对象

  <script>
        //利用NewObject建立对象
        var obj = new Obeject(); //建立了一个空的对象。
        obj.uname = '张三峰';
        obj.age = 18 ;
        obj.sex = '男';
        obj.sayHi = function(){
           console.log('hi-');
        }
        //(1)咱们利用等号 = 赋值的方法 添加对象的属性和方法
        //(2)每一个属性和方法之间用分号结束
        console.log(obj.uname);
        console.log(obj[uname]);


        var obj1 = new Object();
        obj1.name = '鸣人';
        obj1.sex = '男';
        obj.age  = '19岁';
        obj.skill = function(){
            console.log('影分身术');
        }
    </script>

咱们为何须要构造函数？

    <script>
        //咱们为何须要构造函数
        //就是由于咱们前面两种建立对象的方式只能建立一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function(){
                console.log('冰雨');
            }
        }
        //由于咱们一次建立一个函数，里面不少的属性和方法是大量相同的 咱们只能复制
        //所以咱们能够利用函数的方法 重复这些相同的代码 咱们就把这个函数称为构造函数
        //又由于这个函数不同 里卖弄封装的不是普通代码 而是 对象
        //构造函数 就是把咱们对象里面的一些相同的属性和方法抽象出来封装到函数里面
        
    </script>

3.利用构造函数建立对象

   <script>
        //构造幻术的基本格式
        //四大天王的对象 相同的属性：名字，年龄，性别 相同的特色：唱歌
        // function 构造函数名(){
        //     this.属性 = 值;
        //     this.方法 = function(){}
        // }
        //new 构造函数名();
        function Star(uname,age,sex){
            this.uname =uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }

        var ldh = new Star('刘德华',18,'男') //调用函数返回的是一个对象

        ldh.sing('冰雨');
        //console.log(typeof ldh)
        console.log(ldh.uname);
        console.log(ldh['sex']);
        var zxy = new Star('张学友',20 ,'男');
        console.log(zxy.uname);
        console.log(zxy.age);
        //1.构造函数的名字首字母要大写

        //1.构造函数首字母要大写
        //2.咱们构造函数不须要return就能够返回结果
        //3.咱们调用构造函数 必须适应 new
        //4.只要咱们new star() 调用函数就建立一个对象lbw {}
        //5.咱们的属性和方法前面必须添加this

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

        var houyi = new Hero('后裔','射手型','100血量');
        console.log(houyi.name);
        
        houyi.attack('远程');
    </script>

4.构造函数和对象的相互联系

    <script>
        //构造函数和对象
        //1.构造函数 明星 泛指的某一大类 它相似于java语言的类（class）
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        //2.对象 特指某一个 是一个具体的事物 刘德华 
        var lianpo = new Hero('廉颇','力量型','500血量');
        lianpo.attack('近战');
        console.log(lianpo.name);
        //3.咱们利用构造函数建立对象的过程咱们也称为对象的实例化  构造函数也能够建立对象。
    </script>

5.new对象的执行过程

  <script>
        //new 关键词的执行过程
        //1.new 构造函数能够在内存中建立一个空对象
        //2.this 就会指向刚才建立的空对象
        //3.执行构造函数里面的代码 给这个空对象添加属性和方法
        //4.返回这个对象（因此构造函数不须要return）
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        } 
        var lianpo = new Hero('廉颇','力量型','500血量');
        lianpo.attack('近战');
        console.log(lianpo.name);  
    </script>

6.javascript 遍历对象属性

 

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

 

    <script>
        //遍历对象
        var obj = {
            name: '原雪峰',
            age:   '18',
            sex:    '男',
            fn:   function(){
                console.log('fff');
                
            }
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        //如何一次性打印？SSS
        // for in 遍历咱们的对象
        /* for (变量 in 对象)
        {

        } */
        for (var k in obj){
            console.log(k); //k 变量 ，输出获得的是属性名     
            console.log(obj[k]);   //obj[k]获得的是属性值   obj[k]
        }
        //咱们使用for in 里面的变量 咱们喜欢 k 或者 key
    </script>

7.JavaScript小结：

1.对象可让代码结构更清晰

2.对象复杂数据类型object

3.本质：对象就是一组无序的相关属性和方法的集合

4.构造函数泛指一大类，好比苹果，无论红色青色 都是苹果

5.对象特指一个实例 

6.for (var k in object)进行循环遍历对象