深入理解JavaScript对象：创建、遍历与构造函数-优快云博客

本文链接：https://blog.youkuaiyun.com/WangZhang_521/article/details/122989241

本文详细介绍了JavaScript中的对象概念，包括为何需要对象，以及三种创建对象的方法：字面量方式、new Object()和构造函数。同时，探讨了构造函数的作用、new关键字的执行过程及对象的遍历技巧。通过对这些概念的深入理解，有助于提升JavaScript开发能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01-对象的概念以及为什么需要对象

<!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>Document</title>
    <script>
        // 1.1 什么是对象？
        // 现实生活中：外物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书，一辆汽车可以是"对象"。一个数据库，一张网页，一个与远程服务器的连接也可以是"对象"。
        // 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串，数值，数组，函数等。
        // 对象是由属性和方法组成的
        // 属性：事物的特征，在对象中用属性来表示（常用名词）
        // 方法：事物的行为，在对象中用方法来表示（常用动词）
        // 例如：一个手机就是一个对象，    大小，颜色，屏幕尺寸都是属性;  打电话，发短信，玩游戏，砸核桃都是方法

        // 1.2 为什么需要对象
        // 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组.如果要保存一个人的完整信息呢?
        // 例如,将"张三疯"的个人信息保存在数组中的方式为:
        var arr = ['张三疯', '男', 28, 180]; //不清晰
        // js 中的对象表达结果更清晰.更强大.张三疯的个人信息在对象中的表达结构如下
        // 张三疯.姓名 = '张三疯';     //转化为代码 : person.name  = '张三疯';
        // 张三疯.性别 = '男';                       person.sex = '男'; 
        // 张三疯.年龄 = '28';                       person.age = '28';
        // 张三疯.身高 = '180';                      person.height = '180';
    </script>
</head>

<body>

</body>

</html>

02-创建对象的方式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>
        // 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();
        // 3.课堂案例:用对象字面量的形式创建一个名字为可可的狗对象
        //(1) 创建对象
        var obj = {
                name: '可可',
                type: '阿拉斯加犬',
                age: 5,
                color: '棕红色',
                Bark: function() {
                    console.log('汪汪汪');
                    console.log('演电影');
                }
            }
            // (2) 使用对象
        console.log(obj.name);
        console.log(obj.type);
        console.log(obj.age);
        console.log(obj.color);
        obj.sayBark();
    </script>
</head>

<body>

</body>

</html>

03-变量属性函数方法的区别

<!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>
        //1. 变量和属性的相同点 都是用来保存数据的
        var num = 10;
        var obj = {
            age: 18,
            fn: function() { //方法

            }

        }

        function fn() { //函数

        }
        console.log(obj.age);;
        //2.不同点

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

        //3.函数和方法的相同点 都是实现某种功能 做某件事

        //4.不同点
        // 函数是单独声明并调用的 函数名();   单独存在
        // 方法在对象里面 使用的时候 对象.方法
    </script>
</head>

<body>

</body>

</html>

04-创建对象的方式2-利用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 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>
</head>

<body>

</body>

</html>

05-为什么需要构造函数

<!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>
        // 1.为什么使用构造函数
        // 就是因为前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function() {
                console.log('冰雨');
            }
        }
        var ldh = {
                uname: '张学友',
                age: 58,
                sing: function() {
                    console.log('李香兰');
                }
            }
            // 因为一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制
            // 因此我们可以利用函数的方法 重复这些代码 我们就把这个函数称为 构造函数
            // 又因为这个函数不一样,里面封装的不是普通代码,而是对象
            // 构造函数 就是把对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>

<body>

</body>

</html>

06-创建对象的方式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>
        //构造函数:是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用.我们可以把对象里面一些公共的属性和方法抽取出来,然后封装到这个函数里面
        // 利用构造函数创建对象: 我们需要创建四大天王的对象 相同的属性:名字 年龄 性别 相同的方法:唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名(); //使用

        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(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');

        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        console.log(zxy['sex']);
        zxy.sing('李香兰');

        //注意:1.构造函数不需要return 就可以返回结果
        //  2.调用构造函数必须使用new
        //  3.构造函数的名字首字母大写 Star
        //  4.我们只要new Star 调用函数就创建了一个对象 ldh
        //  5.我们的属性和方法前面必须添加this

        // 课堂案例:利用构造函数创建两个英雄对象 函数中公共的部分包括:姓名属性,类型属性,血量属性和攻击方式
        function Hero(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(method) {
                console.log(method);
            }
        }
        var lp = new Hero('廉颇', '力量型', '500血量');
        console.log(lp.name);
        console.log(lp.type);
        console.log(lp.blood);
        lp.attack('近战');

        var hy = new Hero('后羿', '射手型', '100血量');
        console.log(hy.name);
        console.log(hy.type);
        console.log(hy.blood);
        hy.attack('远程');
    </script>
</head>

<body>

</body>

</html>

07-构造函数和对象的区别

<!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>
        //1.构造函数  明显 泛指某一大类 它类似于java语言里面的类
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        //2.对象 是一个具体的事物  特指某一个 比如刘德华 =={name: '刘德华', age: 18, sex: '男', sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
        console.log(ldh);
        //3.我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>
</head>

<body>

</body>

</html>

08-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关键字执行过程</title>
    <script>
        //new 在执行时会做四件事:
        //1.new 在构造函数可以在内存中创建了一个空的对象
        //2.this 就会指向刚才创建的空对象
        //3.执行构造函数的代码 给这个空的对象添加属性和方法
        //4.返回这个对象(所以构造函数里不需要return)
        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, '男');
    </script>
</head>

<body>

</body>

</html>

09-遍历对象

<!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 = {
                name: 'pink老师',
                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] 得到的是属性值 k不加引号
        }
        // 我们使用for in里面的变量 喜欢写k 或key
    </script>
</head>

<body>

</body>

</html>

10-小结

<!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>
        // 1. 对象可以让代码结构更清晰
        // 2. 对象是复杂的数据类型object
        // 3. 本质: 对象就是一组无序的相关属性和方法的集合
        // 4. 构造函数泛指某一大类, 比如苹果, 不管是红色苹果还是绿色苹果, 都统称为苹果
        // 5.对象实例特指一个事物,比如这个苹果,正在给你们讲课的pink老师
        // 6.for...in 语句用于对对象的属性进行循环操作
    </script>
</head>

<body>

</body>

</html>