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)进行循环遍历对象