前端中对象的几种创建方式

xiaoxiao无脸男

已于 2023-03-29 17:31:30 修改

阅读量1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-03-29 16:11:29 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/129838445

版权

创建对象的几种方式：

1.字面量方式

2.工厂模式

3.构造函数模式

4.原型模式

一：对象字面量方式

        var obj1 = {};
        obj1.name = '张三';
        obj1.age = '1';
        obj1.sex = '男';

        var obj2 = {};
        obj2.name = '李四';
        obj2.age = '2';
        obj2.sex = '男';

        console.log(obj1);
        console.log(obj2);

缺点：创建多个对象时，需要重复代码，不能复用。

二：工厂模式(利用函数创建对象)

        function createFactory(id, name, sex, age) {
            // 创建空对象
            var obj = new Object;
            //添加属性
            obj.id = id;
            obj.name = name;
            obj.sex = sex;
            obj.age = age;
            //返回对象
            return obj;
        }
        var obj3 = new createFactory('01', '王五', '男', '1');
        var obj4 = new createFactory('02', '王六', '女', '2');
        console.log(obj3);
        console.log(obj4);

作用：批量创建同类型对象，降低代码冗余度。

缺点:创建出的新对象，不知道是什么Person或者Animal类型，需看函数内部代码。

三：构造函数模式(利用类创建对象)

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。一般情况下我们会把公共的属性定义到构造函数里面，而公共的方法放到原型对象身上。

知识点：

new 在执行时会做四件事情

1.在内存中创建一个新的空对象。
2.让构造函数中的 this 指向这个新的对象。
3.执行构造函数里面的代码，给这个新对象添加属性和方法。
4返回这个新对象（所以构造函数里面不需要 return ）。

        function Person(uname, age) {
            this.uname = uname
            this.age = age
            this.sing = function () {
                console.log('我会唱歌')
            }
        }
        var person1 = new Person('刘德华', 3);
        var person2 = new Person('张学友', 4)
        console.log(person1);
        person1.sing();
        console.log(person2);
        person1.sing();
        console.log(person1.sing == person2.sing);

注意：person1.sing和person2.sing这两个方法不是同一个Function实例，因为每次定义函数时，都会初始化一个对象。在实例化时，如果不想传参数，那么构造函数后面的括号可加可不加，var person1=new Person也可以实例化。只要有 new 操作符，就可以调用相应的构造函数。

作用：用于创建特定类型对象。

缺点：每创建一个实例都要开辟一个内存空间来存放同一个方法，浪费内存。可通过第四中方法原型方法来解决此问题。

构造函数模式与工厂模式的区别：

1.构造函数没有显示的创建对象。

2.将属性和方法添加到this上。

3.没有return。

4.构造函数名字的第一个字母大写。

5.构造函数需与new一起使用，来创建对象。

四：原型模式(利用函数的prototype创建对象)

        function Person1(uname, age) {
            this.uname = uname
            this.age = age
        }
        Person1.prototype.sing=function(songName){
            console.log(this.uname+'会唱'+songName);
        }
        var person3 = new Person1('刘德华', 3);
        var person4 = new Person1('张学友', 4)
        console.log(person3);
        person3.sing('爱你一万年');
        console.log(person4);
        person4.sing('吻别');
        console.log(person3.sing == person4.sing);

注意：person3.sing 和 person4.sing是通过__proto__属性继承Person1.prototype上的sing方法。

平常工作中，构造函数模式和原型模式组合使用比较多。

作用:原型对象上面定义的属性和方法可以被对象实例共享。

相关原型链链接请参考：原型链_xiaoxiao无脸男的博客-CSDN博客

以下是全部代码：

<!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>
</head>

<body>

    <script>

        //一：字面量方式
        var obj1 = {};
        obj1.name = '张三';
        obj1.age = '1';
        obj1.sex = '男';

        var obj2 = {};
        obj2.name = '李四';
        obj2.age = '2';
        obj2.sex = '男';

        console.log(obj1);
        console.log(obj2);


        //二：工厂模式
        function createFactory(id, name, sex, age) {
            // 创建空对象
            var obj = new Object;
            //添加属性
            obj.id = id;
            obj.name = name;
            obj.sex = sex;
            obj.age = age;
            //返回对象
            return obj;
        }
        var obj3 = new createFactory('01', '王五', '男', '1');
        var obj4 = new createFactory('02', '王六', '女', '2');
        console.log(obj3);
        console.log(obj4);

         //三：构造函数模式
        function Person(uname, age) {
            this.uname = uname
            this.age = age
            this.sing = function () {
                console.log('我会唱歌')
            }
        }
        var person1 = new Person('刘德华', 3);
        var person2 = new Person('张学友', 4)
        console.log(person1);
        person1.sing();
        console.log(person2);
        person1.sing();
        console.log(person1.sing == person2.sing);

        //四：原型模式
        function Person1(uname, age) {
            this.uname = uname
            this.age = age
        }
        Person1.prototype.sing=function(songName){
            console.log(this.uname+'会唱'+songName);
        }
        var person3 = new Person1('刘德华', 3);
        var person4 = new Person1('张学友', 4)
        console.log(person3);
        person3.sing('爱你一万年');
        console.log(person4);
        person4.sing('吻别');
        console.log(person3.sing == person4.sing);



    </script>

</body>

</html>