第十三章 JS 对象

一、对象

1.1 对象的概念

现实生活中：万物皆对像，对像是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接地可以是”对象”。
在JavaScript中，对像是组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。

  - 属性：事物的**特征**，在对象中用**属性**来表示（常用名词）
  - 方法：事物的**行为**，在对象中用**方法**来表示（常用动词）

1.2 为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？
例如，将“张三疯”的个人的信息保存在数组中的方式为： :::info var arr=[‘张三疯’，男’，128,154]； ::: JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

二、创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对像(object)：利用字面量创建对象 、利用new Object创建对象 、利用构造函数创建对象。

2.1 利用字面量创建对象

2.1.1 对象字面量的概念

对象字面量：就是花括号{}里面包含了表达这个具体事物（对像）的属性和方法。
{}里面采取键值对的形式表示

  - 键：相当于属性名
  - 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

2.1.2 对象的调用

  - 对象里面的属性调用方法1：**对象.属性名**，这个小点 . 就理解为“的”。
  - 对象里面的属性调用方法2：**对象[“属性名']**，注意方括号里的属性必须动加引号。
  - 对象里面的方法调用：**对象.方法名()**，注意这个方法名字后面一定加括号。

2.1.3 对象字面量代码说明

:::info var obj = {}; :::

    <script>
       // 1.利用字面量创建对象 
       // 创建一个空的对象：var obj = {};
        var obj = {
            uname: '张三疯',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        // (1)里面的属性或者方法我们采取键值对的形式  键 属性名：值 属性值。
        // (2)多个属性或者方法中间用逗号隔开的。
        // (3)方法冒号后面跟的是一个匿名函数。
        // 2.使用对象
        // (1).调用对象的属性方法1：采取对象名.属性名，"."我们理解为"的"。
        console.log(obj.uname);
        // (2).调用属性方法2：对象名['属性名']
        console.log(obj['age']);
        // (3)调用对象的方法： 对象名.方法名();
        obj.sayHi();
    </script>

2.1.4 对象字面量案例练习

案例练习：请按照要求写出对象
请用对象字面量的形式创建一个名字为可可的狗对象。
具体信息如下：
姓名：可可
类型(type):阿拉斯加犬
年龄：5岁，
颜色：棕红色。
技能：汪汪汪(bark),演电影(showFilm)

    <script>
        var obj = {
            uname: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            color: '棕红色',
            skill: function () {
                console.log('汪汪汪(bark),演电影(showFilm)');
            }
        }
        console.log(obj.uname);
        console.log(obj.type);
        console.log(obj['color']);
        console.log(obj['age']);
        obj.skill();
    </script>

2.1.4 关于变量、属性、函数、方法的总结

  - 变量：单独声明赋值，单独存在。
  - 属性：对象里面的变量称为属性，不需受声明，用来描述该对象的特征。
  - 函数：单独存在的，通过“函数名()”的方式就可以调用。
  - 方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

加强分析：
（1）变量和属性的相同点他们都是用来存储数据的

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

（2）函数和方法的相同点都是实现某种功能做某件事

     - 函数是单独声明，调用：函数名（）    单独存在的
     - 方法在对象里面，调用：对象.方法（）

2.2 利用new Object创建对象

2.2.1 new Object 创建对象跟我们前面学的new Array0原理一致

2.2.2 new Object 创建对象的调用

对象里面的属性和方法与之前的对象调用是一致的。

2.1.3 new Object 创建对象代码说明

:::info var obj = new Object(); :::

    <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.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

2.1.3 new Object 创建对象对象案例练习

案例练习：请按照要求写出对象
请用new Object形式创建一个鸣人对象。具体信息如下：
姓名：鸣人
性别：男
年龄：19岁
技能(skill)：影分身术

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

2.3 利用构造函数创建对象。

2.3.1 构造函数概述

构造函数：是一种特殊的函数，主要用来初始化对象，则为对象成员变量赋初始值，它总与 new 运算符一起使用。可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

2.3.2 构造函数的语法格式

    <script>
        //构造函数的语法格式
        function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){

            }
        }
        new 构造函数名();
    </script>

2.3.3 构造函数代码说明

    <script>   
    // 实例说明：创建四大天王的对象 （相同属性：姓名、性别、性别；相同的的方法：唱歌）
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh.name);
        console.log(ldh.sex);
        ldh.sing('冰雨')
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('我等到花儿也谢了')
    </script>

2.3.3 构造函数注意事项

  - 构造函数名的首字母要大写。
  - 构造函数不需要return就可以返回结果。
  - 调用构造时必须使用 new 。
  - 只要new Star() 调用函数就创建一个对象。
  - 属性和方法前面必须加 this。

2.3.3 利用构造函数创建对象案例练习

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

    <script>
        // 利用构造函数创建两个英雄对象。函数中的公共部分包括：姓名属性（name),类型属性(type),血量属性(blood)和攻击方式(attack).
        // 英雄对象的信息如下：
        // ·廉颇  力量型  500血量   攻击：近战
        // ·后羿  射手型  100血量   攻击：远程
        function Hero(uname, type, blood) {
            this.uname = uname;
            this.type = type;
            this.blood = blood;
            this.skill = function (attack) {
                console.log(attack);
            }
        }
        var lp = new Hero('廉颇', '力量型', '500血量');
        console.log(lp.uname);
        console.log(lp.type);
        console.log(lp.blood);
        lp.skill('近战')
        var hy = new Hero('后羿', '射手型 ', '100血量');
        console.log(hy.uname);
        console.log(hy.type);
        console.log(hy.blood);
        hy.skill('远程')
    </script>

2.3.3 构造函数和对象的联系

  - 构造函数，如Stars() ,抽象了对象的公共部分，封装到了函数里面，它泛指某一大类(class)。
  - 创建对象，如new Stars() ,特指某一个，通过new关键字创建对像的过程我们也称为对像实例化。

三、new关键字

3.1 new 关键字的执行过程

（1）在内存中创建一个新的空对象。
（2）让this指向这个新的对象。
（3）执行构造函数里面的代码，给这个新对象添加属性和方法。
（4）返回这个新对象(所以构造函数里面不需要 return )。

四、遍历对象属性

3.1

for in语句用于对数组或者对象的属性进行循环操作

3.1 遍历对象的语法结构

    <script>
        //遍历对象的语法结构
        /*
            for (变量 in 对象){

            }
         */

         //代码说明
         var obj={
             uname:'小明',
             age:18,
         }
         for (var k in obj){  
             console.log(k);       // ==> K 变量输出，得到的是属性名。
             console.log(obj[k]);  //==> obj[k] 得到的是属性值 
         }

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

五、对象案例练习

1.创建一个电脑对象，对象要有颜色、重量、品牌型号，可以看电影、听音乐、打游戏和敲代码。
2.创建一个按钮对象，对象中需要包含宽，高，背景颜色和点击行为。
3.创建一个车的对象，对象要有重量、颜色、牌子，可以载人、拉货和耕田。