How to create multiple objects in JavaScript? Detailed explanation of four methods

During the development process, we often encounter the need to create many similar objects, which may have many identical properties or methods. So what are the methods for us to create multiple objects? What is the best method? Let’s take a look together!

1. Create multiple objects - literal method

The literal method of an object is one of the most common ways to create objects. The properties of objects created in the literal method are writable, enumerable, and configurable by default.

The following code shows how to create multiple objects using literal methods:

//Create multiple objects using literal methods var person1 = {
    name: 'jam',
    age: 18,
    address: 'Shanghai City',
    eating: function () {
        console.log(this.name + 'Eating')
    }
}
var person2 = {
    name: 'tom',
    age: 20,
    address: 'Beijing City',
    eating: function () {
        console.log(this.name + 'Eating')
    }
}
var person3 = {
    name: 'liming',
    age: 19,
    address: 'Tianjin City',
    eating: function () {
        console.log(this.name + 'Eating')
    }
}

经过上述示例代码我们可以看出，仅仅创建了3个对象就用了24行，可以看出字面量方式的弊端：创建同样的对象时，需要编写重复的代码太多。

2. Create multiple objects - factory pattern method

The factory pattern is actually a common design pattern;
Usually we will have a factory method through which we can generate the desired objects;

the following code shows the operation of using the factory mode method to create multiple objects:

//Create multiple objects using the factory function function createPerson (name, age , address) {
    var p = {}
    p.name = name
    p.age = age
    p.address = address
    p.eating = function () {
        console.log(name + 'Eating')
    }
    return p
}

var p1 = createPerson('jam', 19, 'Shanghai City')
var p2 = createPerson('tom', 14, 'Beijing')
var p3 = createPerson('li', 13, 'Tianjin City')

p3.eating() // When li is eating,

可以看出使用工厂模式方法创建了三个对象使用的代码明显比字面量少了好多行，but这就是最好的方式了吗？NO! NO! NO!
工厂模式方法的**弊端**就在于：以上述示例代码为例。当我们打印p1,p2,p3后，获取不到对象最真实的类型，比如p1是人还是动物还是工具

3. Create multiple objects - Constructor method

Constructor I believe everyone is familiar with it. The so-called constructor function is a function that provides a template for generating an object and describes the basic structure of the object. A constructor can generate multiple objects, each with the same structure.

The following code shows the use of the constructor method to create multiple objects:

// Conventional specification, the first letter of the constructor name is capitalized function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating = function () {
        console.log(this.name + 'Eating')
    }
    this.running = function () {
        console.log(this.name + 'running')
    }
}

var p1 = new Person('jam', 20, 'Beijing')
var p2 = new Person('tom', 14, 'Shanghai City')
var p3 = new Person('li', 13, 'Tianjin City')

console.log(p1)
// Output results // Person {
// name: 'jam',       
// age: 20,
// address: 'Beijing', 
// eating: [Function],
// running: [Function]
// }
p1.eating() // Jam

构造函数有个不成文的规范，那就是构造函数的名字首字母大写或者驼峰。
构造函数方式并不是最完美的创建多个对象的方式，也是有缺点的。
缺点：每个方法都要在每个实例上重新创建一遍，比如同样的eating方法和running方法都需要在p1,p2,p3的实例上去创建一遍，浪费很多的内存空间

4. Create multiple objects— —The combination mode of prototype plus constructor method

is to define instance attributes on the constructor, then only these parameters need to be passed in when creating the object. The prototype object is used to define methods and shared properties.

The following code shows how to create multiple objects using prototypes and constructors:

function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating =
        this.running = function () {
            console.log(this.name + 'running')
        }
}
// Add the eating method and running method to the prototype, so you don't need to add the same method in the memory every time you create an object. Person.prototype.eating = function () {
    console.log(this.name + 'Eating')
}
Person.prototype.running = function () {
    console.log(this.name + 'running')
}
var p1 = new Person('jam', 20, 'Beijing')
var p2 = new Person('tom', 14, 'Shanghai City')
var p3 = new Person('li', 13, 'Tianjin City')

console.log(p1)
//Output result:
// Person {
// name: 'jam',       
// age: 20,
// address: 'Beijing', 
// eating: [Function],
// running: [Function]
// }
p1.eating() //

最后的当然是压轴的呀，这种原型和构造函数方式是目前在ECMAScript中使用得最广泛、认同度最高的一种创建对象的方法。

After reading this, do you feel that creating multiple objects is not that complicated? You can create them in minutes using the method of prototype and constructor.