JavaScript 对象

1. 对象

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

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

2. 创建对象的三种方式

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

2.1 利用字面量创建对象

属性或者方法采取键值对的形式键属性名 : 值属性值

对象的调用
- 对象里面的属性调用 : 对象.属性名
- 对象里面属性的另一种调用方式 : 对象[‘属性名’]
- 对象里面的方法调用：对象.方法名()

<!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 obj = {
            uname: 'ich',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }
        // 对象的调用
        // 对象名.属性名
        console.log(obj.uname);
        // 对象名['属性名']
        console.log(obj['age']);
        // 调用对象的方法 对象名.方法名()
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

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 keke = {
            name: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark: function () {
                console.log('它会汪汪汪')
            },
            showFilm: function () {
                console.log('它会演电影');
            }
        }
        console.log(keke.name + '是' + keke.type + '，今年' + keke.age + '岁，' + '它是' + keke.color);
        keke.bark();
        keke.showFilm();
    </script>
</head>

<body>
    <!-- 请用对象字面量的形式创建一个名字为可可的狗对象 -->
    <!-- 
        姓名：可可 
        类型(type)：阿拉斯加犬
        年龄：5岁，
        颜色：棕红色。  
        技能：汪汪汪(bark) ，演电影 (showFilm)
     -->
</body>

</html>

在这里插入图片描述

2.3 利用 new Object 创建对象

Object() ：第一个字母大写
new Object() ：需要 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>利用 new Object 创建对象</title>
    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.name = 'ich';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');

        }
        // 利用 等号 = 赋值的方法 添加对象的属性和方法
        // 每个属性和方法之间用 分号结束
        console.log(obj.name);
        console.log(obj['sex']);
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

2.4 请用new Object 形式创建一个鸣人对象

<!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>
        var mingren = new Object();
        mingren.name = '鸣人';
        mingren.sex = '男';
        mingren.age = '19';
        mingren.skill = '影分身术';

        console.log(mingren.name + '是' + mingren.sex + '的，今年' + mingren.age + '岁，' + '他会' + mingren.skill);
    </script>
</head>

<body>
    <!-- 请用new Object 形式创建一个鸣人对象 -->
    <!-- 
        姓名：鸣人  
        性别：男 
        年龄：19岁  
        技能（skill）：影分身术
     -->
</body>

</html>

在这里插入图片描述

2.5 为什么需要使用构造函数

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要使用构造函数</title>
    <script>
        // 为什么需要使用构造函数
        // 就是因利用 字面量 和 new Object 创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function () {
                console.log('冰雨');

            }
        }
        var zxy = {
            uname: '张学友',
            age: 58,
            sing: function () {
                console.log('李香兰');

            }
        }
        // 因为一次创建一个对象，里面很多的属性和方法是大量相同的 只能复制
        // 因此可以利用函数的方法 重复这些相同的代码 就把这个函数称为 构造函数
        // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
        // 构造函数 就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>

<body>

</body>

</html>

2.6 利用构造函数创建对象

注意
- 构造函数约定首字母大写
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法
- 构造函数中不需要 return 返回结果
- 当创建对象的时候，必须用 new 来调用构造函数

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用构造函数创建对象</title>
    <script>
        // 利用构造函数创建对象
        // new 构造函数名();
        function Star(uname, age, sex) { //构造函数名字首字母要大写
            // 属性和方法前面必须添加 this
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
            // 构造函数不需要return 就可以返回结果
        }

        // 调用构造函数 必须使用 new
        // new Star() 调用函数就创建一个对象 ldh {}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');

        var zxy = new Star('张学友', 19, '男');
        console.log(typeof zxy);
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')
    </script>
</head>

<body>

</body>

</html>

2.7 利用构造函数创建两个英雄对象

<!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;
            this.newHero = function () {
                console.log(this.name + ' 是 ' + this.type + '英雄，血量 ' + this.blood + '，属于' + this.attack + '攻击');
            }
        }

        var lp = new Hero('廉颇', '力量型', 500, '近战');
        var hy = new Hero('后羿', '射手型', 100, '远程');
        lp.newHero();
        hy.newHero();
    </script>
</head>

<body>
    <!-- 利用构造函数创建两个英雄对象 -->
    <!-- 
        函数中的公共部分包括：
            姓名属性(name)
            类型属性（type）
            血量属性（blood）
            攻击方式（attack） 
    -->
    <!-- 
        廉颇   力量型    500血量    攻击：近战
        后羿   射手型    100血量    攻击：远程
     -->
</body>

</html>

3. new关键字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>new关键字执行过程</title>
    <script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        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('ich', 18, '男');
    </script>
</head>

<body>

</body>

</html>

4. 遍历对象属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遍历对象</title>
    <script>
        // 遍历对象 
        var obj = {
            name: 'ich',
            age: 18,
            sex: '男',
            fn: function () { }
        }
        // console.log(obj.name);
        // console.log(obj.age);
        // console.log(obj.sex);

        // for in 遍历对象
        // for (变量 in 对象) {}
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值
        }

        for (var key in obj) {
            console.log(key + ' : ' + obj[key]);
        }
        // 使用 for in 里面的变量 我们喜欢写 k  或者  key
    </script>
</head>

<body>

</body>

</html>