第一章：对象

1.1 什么是对象？

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

明星    周星驰(星爷)  女朋友    迪丽热巴     班主任    咱们班班主任 
苹果    这个苹果      手机    小米手机     游戏    刺激战场

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成。
属性：事物的特征，在对象中用属性来表示（常用名词）。
方法：事物的行为，在对象中用方法来表示（常用动词）。

什么是对象.png

1.2 为什么需要对象？

保存一个值的时候，可以使用变量；保存多个值（一组值）的时候，可以使用数组；如果需要保存一个人的完整信息呢？
例如，将“张三疯”的个人信息保存在数据中的方式为：

var arr = [‘张三疯’, ‘男', 128, 154];

JS中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

张三疯.姓名 =  ‘张三疯';
张三疯.性别 = ‘男'; 
张三疯.年龄 = 128; 
张三疯.身高 = 154；

person.name =  ‘张三疯';
person.sex = ‘男'; 
person.age = 128; 
person.height = 154；

第二章：创建对象的三种方式

2.1 概述

在JavaScript中，现阶段我们可以采用三种方式创建对象（Object）：
- ①利用字面量创建对象。
- ②利用new Object创建对象。
- ③利用构造函数创建对象。

2.2 利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法。{}里面采取键值对的形式表示。
键：相当于属性名。
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数类型等）。
示例：

<!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>利用字面量创建对象</title>
    <script>
        /* 利用字面量创建对象 {} */
        var obj = {}; //创建了一个空的对象
        //创建对象
        var person = {
            uname: '张三疯',
            age: 80,
            sex: '男',
            sayHai: function () {
                console.log('你们好啊');
            }
        };
        /*
          - 里面的属性或方法，采用键值对的形式，键（属性名），值（属性值）。
          - 多个属性或者方法中间用逗号隔开。
          - 方法冒号后面跟的是一个匿名函数。
        */

        /*
          - 调用对象的属性，对象名.属性名 或 对象名['属性名']。
          - 调用对象的方法，对象名.方法名();
        */
        console.log(person.uname);
        console.log(person.age);
        console.log(person.sex);
        person.sayHai();


    </script>
</head>

<body>

</body>

</html>

2.3 调用对象

对象里面的属性调用：对象.属性名。
对象里面属性的另一种调用方法：对象['属性名']，注意方括号里面的属性必须加引号。
对象里面的方法调用：对象.方法名()，注意这个方法名后面一定要加括号。
示例：

<!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>利用对象字面量创建对象</title>
    <script>
        /* 利用对象字面量创建对象 {} */
        var obj = {}; //创建了一个空的对象
        //创建对象
        var person = {
            uname: '张三疯',
            age: 80,
            sex: '男',
            sayHai: function () {
                console.log('你们好啊');
            }
        };
        /*
          - 里面的属性或方法，采用键值对的形式，键（属性名），值（属性值）。
          - 多个属性或者方法中间用逗号隔开。
          - 方法冒号后面跟的是一个匿名函数。
        */

        /*
          - 调用对象的属性，对象名.属性名 或 对象名['属性名']。
          - 调用对象的方法，对象名.方法名();
        */
        console.log(person.uname);
        console.log(person.age);
        console.log(person.sex);
        person.sayHai();


    </script>
</head>

<body>

</body>

</html>

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

变量和属性的相同点：都是用来存储数据的。
变量和属性的不同点：
- 变量：单独声明并赋值，使用的时候直接写变量名。单独存在。
- 属性：在对象里面的，不需要声明，使用的时候必须是对象.属性。
函数和方法的相同点：都是实现某种功能。
函数和方法的不同点：
- 函数：函数是单独声明，并且调用的。单独存在。
- 方法：在对象里面，调用的时候必须是对象.方法()。

2.5 利用new Object创建对象

和new Array()的原理类似。
示例：

<!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>利用new Object创建对象</title>
    <script>
        /* 和new Array()的原理类似 */
        var person = new Object(); //创建了一个空对象

        person.name = '张三疯';
        person.age = 108;
        person.sayHai = function () {
            console.log('哈哈~，贫道是三丰真人~')
        }
        /* 利用等号=赋值的方法，添加对象的属性和方法 */
        /* 属性和方法之间用;隔开 */

        console.log(person.name);
        console.log(person.age);
        person.sayHai();
    </script>
</head>

<body>

</body>

</html>

2.6 利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象变量赋初始值，它总是和new运算符一起使用。我们将对象中的一些公共属性和方法抽取出来，然后封装到这个函数中。
在js中，使用构造函数需要注意以下两点：
- 构造函数用于创建某一类对象，其首字母需要大写。
- 构造函数要和new一起使用才有意思。
语法

function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){

    }
}
var 对象名 = new 构造函数名();

注意：

构造函数约定首字母大写。
函数内的属性和方法前面加this，表示当前对象的属性和方法。
构造函数中不需要return返回结果。
当我们创建对象的时候，必须使用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>利用构造函数创建对象</title>
    <script>
        /*
            利用构造函数创建两个英雄对象。函数中的公共部分包括：姓名属性(name)，类型属性（type），血量属性（blood）和攻击方式（attack）。

            英雄对象的信息如下 ：
             廉颇   力量型    500血量    攻击 ：近战
             后羿   射手型    100血量    攻击： 远程
        */

        function Hero(name,type,blood,attack){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = attack;
        }

        var hero1 = new Hero('廉颇','力量型','500血量','近战');
        var hero2 = new Hero('后羿','射手型','100血量','远程');

        console.log(hero1);
        console.log(hero2);
    </script>
</head>

<body>

</body>

</html>

2.7 构造函数和对象

构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）。
创建对象：特指某一个，通过new关键字创建对象的过程。

构造函数和对象.png

第三章：new关键字

new在执行的时候会做四建事情：
①在内存中创建一个新的空对象。
②让this指向这个新的对象。
③执行构造函数里面的代码，给这个新对象添加属性和方法。
④返回这个新对象（所以构造函数里面不需要return）。

第四章：遍历对象属性

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

for (变量 in 对象名字) {
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为k或者key。

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

示例：

<!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>遍历对象属性</title>
    <script>
        function Hero(name,type,blood,attack){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = attack;
        }

        var hero1 = new Hero('廉颇','力量型','500血量','近战');

        for(var key in hero1){
            console.log(key); //属性名
            console.log(hero1[key]) //属性值
        }
    </script>
</head>

<body>

</body>

</html>