目录

目标

对象

什么是对象

为什么需要对象

创建对象的三种方式

利用字面量创建对象

创建对象

使用对象

案例

变量、属性、函数、方法总结

利用  new Object 创建对象

案例

利用构造函数创建对象

为什么需要构造函数

构造函数定义

构造函数语法格式

构造函数使用

案例

构造函数和对象

new 关键字

执行过程

遍历对象属性

小结

作业

简易计算器

目标

• 能够说出为什么需要对象
• 能够使用字面量创建对象
• 能够使用构造函数创建对象
• 能够说出 new 的执行过程
• 能够遍历对象

对象

什么是对象

1. 在现实生活中：

• 现实生活中，万物皆为对象
• 对象是一个具体的事物，看得见摸得着的实物
• 例如：一本书、一辆汽车、一个人都可以是 "对象"
• 一个数据库、一张网页、一个与远程服务器的连接也可以是 "对象"

2. 在 JavaScript 中：

• 对象是一组无序的相关属性和方法的集合
• 所有的事物都是对象
• 例如字符串、数值、数组、函数等

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

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

例如一部手机：

• 大小、颜色、重量、屏幕尺寸、厚度都是属性
• 打电话、发短信、玩游戏、砸核桃则是方法

为什么需要对象

• 保存某个值，可以使用变量；保存多个值（一组值），可以使用数组
• 保存一个事物的完整信息（属性和方法），需要使用对象
• JS 中的对象表达结构更清晰、更强大

<script>
    person.name = '张三';
    person.sex = '男';
    person.age = 20;
    person.height = 120;
</script>

创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

• 利用字面量创建对象
• 利用 new Object 创建对象
• 利用构造函数创建对象

利用字面量创建对象

• 对象字面量：花括号 { } 。里面包含了表达某个具体事物（对象）的属性和方法
• var person = {}; 创建一个空对象

创建对象

• 里面的属性和方法采取键值对的形式
• 键：属性名；值：属性值
• 多个属性或方法之间用逗号隔开
• 方法冒号后面定义的是一个匿名函数

使用对象

调用对象的属性

• 方法1：对象名.属性名
• 方法2：对象名['属性名']

调用对象的方法

• 对象名.方法名()

    <script>
        // 利用字面量 {} 创建对象
        // var person = {}; 创建一个空对象

        // 创建对象
        // 里面的属性和方法采取键值对的形式
        // 键：属性名 值：属性值
        // 多个属性或方法用逗号隔开
        // 方法冒号后面定义的是一个匿名函数

        // 使用对象
        // 调用对象的属性第一种方法：对象名.属性名
        // console.log(person.pername);
        // 调用对象的属性第二种方法：对象名['属性名']
        // console.log(person['pername']);
        // 调用对象的方法 sayHi(): 对象名.方法名
        // persom.sayHi();

        var person = {
            pername: '张三',
            age: 20,
            sex: '男',
            sayHi: function() {
                console.log('hi~~');
            }
        }
    </script>

案例

    <script>
        var dog = {
            pername: '可可', // 属性和属性值之间千万不能用 = ，而应该用 :
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark: function() {
                console.log('汪~汪~汪');
            }, // 对象的两个方法之间的逗号也不能忽视
            showFilm: function() {
                console.log('可可小狗');
            }
        }
        console.log(dog.pername);
        console.log(dog['color']);
        dog.bark();
        dog.showFilm();
    </script>

注意：

• 多个属性或方法之间用逗号隔开，必须注意
• 属性和属性值之间应该用 " : "；而不是 " = " 

变量、属性、函数、方法总结

变量和属性

相同点：

• 都可以用来存储数据

不同点：

• 变量：单独声明并赋值，使用时直接写变量名，单独存在
• 属性：对象里面的变量称为属性，不需要声明；用来描述该对象的特征；使用时必须是 对象名.属性名

函数和方法

相同点：

• 用于实现某种功能，完成某项操作

不同点：

• 函数：单独声明，并且被调用；调用函数：函数名()  单独存在
• 方法：对象里面的函数称为方法，方法不需要声明；调用方法：对象名.方法名()；方法用来描述该对象的行为和功能

利用  new Object 创建对象

• 与创建数组 new Array() 原理一致
• var 对象名 = new Object();
• 利用等号赋值 " = " 的方法添加对象的属性和方法
• 每个属性之间用分号 " ; " 结束
• 方法之间不需要符号表示结束

    <script>
        // 利用 new Object 创建对象
        var dog = new Object(); // 创建了一个空的对象
        // 利用等号 = 赋值的方法添加对象的属性和方法
        // 每个属性和方法之间用分号 ; 结束
        dog.pername = '可可';
        dog.type = '阿拉斯加犬';
        dog.age = 5;
        dog.color = '棕红色';
        dog.bark = function() {
            console.log('汪~汪~汪');
        } // 使用 new Object 创建对象时，方法后不需要再添加其他符号
        dog.showFilm = function() {
            console.log('小狗可可');
        }
        console.log(dog.pername);
        console.log(dog['type']);
        dog.bark();
        dog.showFilm();
    </script>

案例

    <script>
        var naruto = new Object();
        naruto.pername = '鸣人';
        naruto.sex = '男';
        naruto.age = 19;
        naruto.skill = function() {
            console.log('看招，影分身术！！！');
        }
        console.log(naruto.pername);
        console.log(naruto['age']);
        naruto.skill();
    </script>

利用构造函数创建对象

为什么需要构造函数

• 字面量创建对象和 new Object 创建对象这两种方式一次只能创建一个对象
• 我们创建的许多对象，它们的属性和方法大部分都是相同的
• 因此，我们可以使用函数的方法，将这些重复使用的代码进行封装
• 封装多个不同对象所具有的相同属性和方法的函数，被称为构造函数

构造函数定义

• 一种特殊的函数，主要用来初始化对象，即为对象成员赋初始值
• 通常与 new 运算符搭配使用
• 将不同对象所具有的一些公共的属性和方法抽取出来并封装到构造函数中

构造函数语法格式

    <script>
        // 利用构造函数创建对象
        // 构造函数语法格式
        // 声明函数
        function 构造函数名() {
            this.属性 = 值;
            this.方法 = function() {}
        }
        // 调用构造函数
        new 构造函数名();
    </script>

构造函数使用

    <script>
        // 利用构造函数创建对象
        // 构造函数首字母大写
        // 构造函数中的属性和方法前面必须添加 this
        function Star(pername, age, sex, nativePlace) {
            // this.pername 代表相同的属性-姓名
            // 它的属性值 pername 的来源: 实参'刘德华'传递给形参 'pername',然后传递给 this.pername
            this.pername = pername;
            this.age = age;
            this.sex = sex;
            this.nativePlace = nativePlace;
            this.sing = function(sang) {
                    console.log(sang);
                }
                // 构造函数不需要 return 就能返回结果
        }
        // 调用构造函数必须使用 new
        // 调用构造函数时,只要 new Star(),就创建了一个对象 ldh {}
        // 对象是在调用构造函数时创建的
        var ldh = new Star('刘德华', 48, '男', '香港');
        console.log(ldh.pername);
        console.log(ldh['age']);
        // 将 '冰雨' 传递给形参 sang,然后传递给 log(sang) 进行输出
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 49, '男', '香港');
        console.log(zxy.pername);
        console.log(zxy['nativePlace']);
        zxy.sing('吻别');
    </script>

案例

注意：

• 调用构造函数时，new 千万不能忘记
• 只有 new 之后才会创建一个新的对象

    <script>
        function Hero(heroName, heroProfession, blood, attack) {
            this.heroName = heroName;
            this.heroProfession = heroProfession;
            this.blood = blood;
            this.attack = attack;
            this.skill = function(bigMove) {
                console.log(bigMove);
            }
        }
        // 调用构造函数时 new 一定不能忘记
        // 只有 new 之后才会创建一个对象
        var houYi = new Hero('后羿', '射手', 500, '远程');
        console.log(houYi.heroName);
        console.log(houYi.attack);
        houYi.skill('灼日之矢');

        var lianPo = new Hero('廉颇', '战士', 1000, '近战');
        console.log(lianPo.heroProfession);
        console.log(lianPo.blood);
        lianPo.skill('正义豪腕');
    </script>

构造函数和对象

• 构造函数，如 Hero() ，抽象了对象的公共部分，封装到构造函数中，泛指某一大类（class）
• 创建对象，如 new Hero()，特指某一个，通过 new 关键字创建对象的过程称为对象实例化

new 关键字

执行过程

1. new 构造函数可以在内存中创建一个空的对象（两个人生了一个宝宝）
2. 所有的 this 都指向创建的空对象（确认这个宝宝是亲生的）
3. 执行构造函数中的代码，给创建的空对象添加属性和方法（教孩子各种各样的知识技能）
4. 返回这个对象（构造函数内不需要 return）（孩子长大成材回报父母）

遍历对象属性

• for...in 语句用于对数组或者对象的属性进行循环操作
• for...in 中的变量常用 k 或者 key
• 常用于遍历对象的变量
• 对象中有方法时，由于方法调用与变量不同，暂时不会，sorry

    <script>
        function Hero(heroName, heroProfession, blood, attack) {
            this.heroName = heroName;
            this.heroProfession = heroProfession;
            this.blood = blood;
            this.attack = attack;
            this.skill = function(bigMove) {
                console.log(bigMove);
            }
        }

        var houYi = new Hero('后羿', '射手', 500, '远程');
        // for...in 中的变量常用 k 或者 key
        // 常用于遍历对象的属性
        // 对象中有方法时,由于方法调用与变量不同,俺不会,sorry
        for (var key in houYi) {
            console.log(key); // key 变量 输出 得到的是属性名
            console.log(houYi[key]); // houYi[key] 得到的是属性值
        }

        var lianPo = new Hero('廉颇', '战士', 1000, '近战');
        for (var key in lianPo) {
            console.log(key, lianPo[key]);
        }
    </script>

小结

• 对象可以让代码结构更清晰
• 对象属于复杂数据类型 object
• 本质：对象是一组无序的相关属性和方法的集合
• 构造函数泛指某一大类，比如人、水果......
• 对象实例特指某一个具体的事物，比如刘德华、左手的苹果......
• for...in 语句用于对对象的属性进行遍历操作

作业

简易计算器