【JavaScript】创建对象的三种方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Xumuyang_/article/details/86550695

JavaScript创建对象的三种方式

     1、调用系统的构造函数创建对象
     
     2、自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
     
     3、字面量的方式创建对象

一、调用系统的构造函数创建对象

在这里插入图片描述举个栗子👇

<script>
        //实例化对象
        var obj = new Object();

        //对象有特征,属性和行为
        //添加一些属性:对象.名字=值;
        obj.name = "小二";
        obj.age = 18;
        obj.sex = "女";

        //添加一个方法:对象.名字=函数;
        obj.hobby = function () {
            console.log("我喜欢学习");
        };//因为进行了赋值,所以这里要加分号结束

        //输出
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        //方法的调用
        obj.hobby();
</script>

效果👉
在这里插入图片描述
在这里插入图片描述再举个栗子👇

<script>
        //练习:有一个黄色小狗,叫大黄,今年3岁了,250斤的重量每次走路都很慢,喜欢吃大骨头
        //创建对象
        var smallDog = new Object();
        smallDog.name = "大黄";
        smallDog.age = 3;
        smallDog.color = "黄色";
        smallDog.weight = "250";
        smallDog.eat = function () {
            console.log("我是大黄,我要吃大骨头");
        };
        smallDog.walk = function () {
            console.log("我是大黄,我会摇尾巴");
        };
        //方法的调用
        smallDog.eat();
        smallDog.walk();
</script>        

效果👉
在这里插入图片描述

延申问题1:如何获取该变量(对象)是不是属于xxx类型的?

语法:

     变量 instanceof 类型的名字----> 布尔类型,true 就是这种类型,false 就不是这种类型

     在当前对象的方法中,可以使用this关键字

在这里插入图片描述举个栗子👇

<script>
        //创建一个人的对象
        var person = new Object();
        person.name = "小白";
        person.age = 10;
        person.sex = '男';
        person.sayHi = function () {
            //在当前这个对象的方法中,是可以访问当前这个对象的属性的
            console.log("你好,我叫:"+person.name);//输出:你好,我叫小白
        };
        //创建一个学生的对象
        var stu = new Object();
        stu.name = "小茗同学";
        stu.age = 12;
        stu.sex = "男";
        stu.study = function () {
            console.log("我是小茗同学,我超级喜欢学习。");
        };
        //创建一个小狗的对象
        var dog = new Object();
        dog.name = "乐乐";
        dog.say = function () {
            console.log("我是小狗乐乐,我喜欢吃黄瓜🥒");
        };

        //输出这些对象是什么类型
        console.log(person instanceof Object);//true 意思是:是对象类型的
        console.log(stu instanceof Object);//true  意思是:是对象类型的
        console.log(dag instanceof Object);//true  意思是:是对象类型的
</script>

缺陷(⊙﹏⊙):要创建无数个对象,累 skr 人儿。。。💔💔💔💔
有没有什么好办法呢??
当然!!那就是:👇👇👇

延申问题2:如何一次性创建多个对象?

解决办法:把创建对象的代码封装在一个函数中----->工厂模式创建对象

<script>
        //工厂模式创建对象
        function createObject(name,age) {
            var obj = new Object();//创建对象
            obj.name = name;
            obj.age = age;
            obj.sayHello = function () {
                console.log("你好,我叫" + this.name + ",我今年" + this.age + "岁了");
            };
            return obj;
        }
        //创建人的对象
        var per1 = createObject("小芳",12);//调用上面的函数即可
        per1.sayHello();//输出:你好,我叫小芳,我今年12岁了

        var per2 = createObject("小圆", 20);//调用上面的函数即可
        per1.sayHello();//输出:你好,我叫小圆,我今年20岁了
</script>

效果👉
在这里插入图片描述

二、自定义构造函数创建对象

在这里插入图片描述举个栗子👇

<script>
       //首先,自定义一个构造函数
        function Person(name,age) {
            this.name = name;
            this.age = age;
            this.sayHi = function () {
                console.log("我叫" + this.name + ",年龄是" + this.age);
            };
        }
        //然后,创建对象
        var obj = new Person("小明",10);
        console.log(obj.name);
        console.log(obj.age);
        obj.sayHi();//我叫小明,年龄是10

        var obj2 = new Person("大明",20);
        console.log(obj2.name);
        console.log(obj2.age);
        obj2.sayHi();//我叫大明,年龄是20

        //还可以验证一下这个对象的类型
        console.log(obj instanceof Person);//true
        console.log(obj2 instanceof Person);//true
</script>        

效果👇
在这里插入图片描述
在这个过程中,自定义构造函数创建对象做了四件事情:

  1、在内存中开辟(申请一块空闲的空间)控件,存储创建的新的对象
  2、把this设置为当前的对象
  3、设置对象的属性和方法的值
  4、把this这个对象返回

三、字面量的方式创建对象

<script>
        //字面量的方式创建对象
        var obj = {
            //添加属性
            name : "小白",
            age : 19,
            sayHi: function () {
                console.log("我叫" + this.name + ",今年" + this.age + "岁");
            }
        };
        //调用方法
        obj.sayHi();//输出:我叫小白,今年19岁
    </script>

效果👉
在这里插入图片描述

简单总结,如有不足,欢迎指正!💗

展开阅读全文

没有更多推荐了,返回首页