JavaScript对象

目录

1.对象

1.1 什么是对象

1.2 为什么需要对象

 ​编辑

2. 创建对象的三种方式

2.1 利用字面量创建对象

 案例

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

 2.2 利用new Object创建对象

 案例

 2.3 利用构造函数创建对象

 案例

 2.4 构造函数和对象

 3.new关键字

4.遍历对象属性

---

 

1.对象

1.1 什么是对象

1.2 为什么需要对象

 

2. 创建对象的三种方式

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

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

2.1 利用字面量创建对象

对象字面量：就是花括号{}里面包含了表达这个具体事物（对象）的属性和方法 

<script>
        // 1.利用对象字面量创建对象 {}
        // var obj = {}; 创建了一个空的对象
        var obj = {
            uname: '张三丰',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('Hi~');
            }
        }
        // (1)里面的属性或者方法采取键值对的形式 键 属性名 ： 值 属性值
        // （2）多个属性或者方法中间用逗号隔开
        // （3）方法冒号后面跟着的是一个匿名函数

        // 2.使用对象
        // (1)调用对象的属性 采用对象名.属性名
        console.log(obj.uname);
        // (2)调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3)调用对象的方法 sayHi 对象名.方法名()
        obj.sayHi();
    </script>

 

 案例

<script>
        var obj = {
            uname: '可可',
            type: '阿拉斯加犬',
            age: 5,
            color: '棕红色',
            bark: function () {
                console.log('汪汪汪');
            },
            showFilm: function () {
                console.log('后会无期');
            }
        }
        console.log(obj.uname);
        console.log(obj.type);
        console.log(obj.age);
        console.log(obj.color);
        obj.bark();
        obj.showFilm();
    </script>

 

 

 

 

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

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

<script>
        // 变量、属性、函数、方法的区别
        // 1.变量和属性的相同点 它们都是用来存储数据的
        var num = 10;
        var obj = {
            age: 18,
            fn : function(){
                console.log(111);
            }
        }

        function fn() {

        }
        console.log(num);  //10
        console.log(obj.age); //18
        console.log(age);  //报错

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

        // 2.函数和方法的相同点 都是实现某种功能 做某件事
        // 函数是单独声明并且调用的 函数名()  是单独存在的
        // 方法 是在对象里面的 调用的时候对象.方法()
    </script>

 2.2 利用new Object创建对象

跟前面学的new Array() 原理一致

 <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['age']);
        obj.sayHi();
    </script>

 

 案例

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

 2.3 利用构造函数创建对象

我们为什么需要使用构造函数？因为前面两种创建对象的方式一次只能创建一个对象 有时候一次只能创建一个对象 创建多了对象之后，里面很多的属性和方法是大量相同的 我们只能复制，因此可以利用函数的方法重复这些相同的代码，这个函数称为构造函数

这个函数里面封装的不是普通的代码，而是对象

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

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

<script>
        // 利用构造函数创建对象
        // 我们需要创建四大天王的对象 相同的属性：名字 年龄 性别 相同的方法：唱歌
        // function 构造函数名() {
        //     this.属性=值;
        //     this.方法= function() {}
        // }
        // new 构造函数名();

        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 18, '男');  //调用函数返回的是一个对象
        // console.log(typeof ldh); //object
        console.log(ldh.name);  //刘德华
        console.log(ldh.age);  //18
        ldh.sing('冰雨');

        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰');
        // 1.构造函数名字首字母要大写
        // 2.构造函数不需要return就可以返回结果
        // 3.我们要调用构造函数必须使用new
        // 4.我们只要new Star() 调用函数就创建了一个对象 ldh{} 
        // 5.属性和方法前面必须加this
    </script>

 

 案例

<script>
        function Hero(uname, type, blood) {
            this.name = uname;
            this.type = type;
            this.blood = blood;
            this.attack = function (method) {
                console.log(method);
            }
        }
        var lp = new Hero('廉颇', '力量型', 500);
        console.log(lp.name + lp.type + lp.blood);
        lp.attack('近战');
        var hy = new Hero('后羿', '射手型', 100);
        console.log(hy.name + hy.type + hy.blood);
        hy.attack('远程');

    </script>

 2.4 构造函数和对象

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

<script>
        // 1.构造函数 泛指某一大类 类似于Java里面的类
        function Star(uname, age, sex) {
            this.name = uname;
            this.aeg = age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song);
            }
        }
        // 2.对象 特指 是一个具体的事物
        var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
        console.log(ldh); //{name: '刘德华', aeg: 18, sex: '男', sing: ƒ}
        // 3.我们利用构造函数创建对象的过程称为对象的实例化
    </script>

 3.new关键字

<script>
        // 构造函数的执行过程
        // 1.new构造函数在内存中创建了一个空的对象
        // 2.this就会指向刚才创建的对象
        // 3.执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4.返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.aeg = age;
            this.sex = sex;
            this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
    </script>

4.遍历对象属性

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

 <script>
        //遍历对象
        var obj = {
            name: '郭老师',
            age: 18,
            sex: '男',
            fn: function () {
                console.log(11);
            }
        }
        // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k); //k 变量 输出得到的是属性名
            console.log(obj[k]); //obj[k]得到的是属性值
        }
        // 我们使用for in 里面的变量喜欢用k或者key
    </script>