一个实例看懂JS四种创建对象方式的区别

Dear 丶 2022-10-23 11:25 129阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 功能相同
 *  3. 结构不同
 *  4. 小结

# 1. 概述 #

JS中常用的创建对象方式有四种：

1.  对象字面量
2.  new Object()
3.  构造函数
4.  Object.create()

这四种方式虽然都能创建对象，但是还是有区别的，接下来我们研究下。

# 2. 功能相同 #

先来看一个实例，我们使用4种方式创建4个对象。

// 对象字面量
            var dog1 = {
        
                name: '大黄',
                age: 2,
                speak: function () {
        
                    console.log("汪汪");
                }
            }
            // 使用Object
            var dog2 = new Object();
            dog2.name = "大黄";
            dog2.age = 2;
            dog2.speak = function () {
        
                console.log("汪汪");
            }
            // 使用构造函数
            function Dog(name, age) {
        
                this.name = name;
                this.age = age;
            }
            Dog.prototype.speak = function () {
        
                console.log("汪汪");
            };
            var dog3 = new Dog("大黄", 2);
            // 使用Object.create
            var dog4 = Object.create(dog1);

这4个对象都是有name、age两个属性和speak一个方法，我们来测试下：

console.log(dog1.name + dog1.age);
            dog1.speak();
            console.log(dog2.name + dog2.age);
            dog2.speak();
            console.log(dog3.name + dog3.age);
            dog3.speak();
            console.log(dog4.name + dog4.age);
            dog4.speak();

执行结果如下，可见他们的功能是一样的。  
![在这里插入图片描述][20210305113840856.png_pic_center]

# 3. 结构不同 #

虽然使用起来功能一样，但是实际这4个对象的结构并不是一样的，我们继续执行以下代码：

console.log(dog1);
            console.log(dog2);
            console.log(dog3);
            console.log(dog4);

执行结果如下：  
![在这里插入图片描述][20210305114016307.png_pic_center]  
可见，对象字面量和new Object方式创建的对象结构是一样的。

使用构造函数创建的对象，speak方法是在其原型上的。

而使用Object.create创建的对象，原对象的属性和方法都会挂到新对象的原型上。

# 4. 小结 #

使用没区别，结构有区别，还是要加以区分的。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210305113840856.png_pic_center]: /images/20221023/e48b5b6e566246039a6ed4e0913d9360.png
[20210305114016307.png_pic_center]: /images/20221023/a902b4d8008041978daf66387da5ebfc.png