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

How to create multiple objects in JavaScript? Which is the best way to create multiple objects in JavaScript? Literal? Factory pattern approach? Constructor method? Prototype method? Prototype plus constructor method? You'll know when you come in and take a look.

In the development process, we often encounter the need to create many similar objects, which may have many identical properties or methods. Then we create multiple objects. What are they? 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 an object. Create it in a literal method. The object properties of are writable, enumerable, and configurable by default.

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

// 字面量方式创建多个对象
var person1 = {
    name: 'jam',
    age: 18,
    address: '上海市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person2 = {
    name: 'tom',
    age: 20,
    address: '北京市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}
var person3 = {
    name: 'liming',
    age: 19,
    address: '天津市',
    eating: function () {
        console.log(this.name + '在吃饭')
    }
}

We can see from the above example code that only 3 objects are created and used On line 24, we can see the disadvantages of the literal method: when creating the same object, too much repeated code needs to be written.

2. Create multiple objects - factory pattern method

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 pattern method to create multiple objects:

// 工厂函数方式创建多个对象
function createPerson (name, age, address) {
    var p = {}
    p.name = name
    p.age = age
    p.address = address
    p.eating = function () {
        console.log(name + '在吃饭')
    }
    return p
}

var p1 = createPerson('jam', 19, '上海市')
var p2 = createPerson('tom', 14, '北京市')
var p3 = createPerson('li', 13, '天津市')

p3.eating() // li在吃饭

It can be seen that the code used to create three objects using the factory mode method is obviously many fewer lines than the literal value, but is this the best way? NO! NO! NO!
The **disadvantages** of the factory pattern method are: Take the above sample code as an example. When we print p1, p2, and p3, we cannot get the truest type of the object, such as whether p1 is a human, an animal, or a tool

3. Create multiple objects—— Constructor method

I believe everyone is familiar with the constructor. 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:

// 约定俗成的规范，构造函数名字首字母大写
function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating = function () {
        console.log(this.name + '在吃饭')
    }
    this.running = function () {
        console.log(this.name + '在跑步')
    }
}

var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

There is an unwritten norm for constructors, that is, the first letter of the constructor's name is capitalized Or hump.
The constructor method is not the most perfect way to create multiple objects, and it also has shortcomings.
Disadvantages: Each method must be recreated on each instance. For example, the same eating method and running method need to be created on the instances of p1, p2, and p3, which wastes a lot of time. Memory space

#4. Create multiple objects - prototype plus constructor method

The combination mode of the two is defined on the constructor Instance attributes, then you only need to pass in these parameters when creating the object. The prototype object is used to define methods and shared properties.

The following code shows the use of prototypes and constructors to create multiple objects:

function Person (name, age, address) {
    this.name = name
    this.age = age
    this.address = address
    this.eating =
        this.running = function () {
            console.log(this.name + '在跑步')
        }
}
// 将eating方法和running方法加在原型上，就不需要每次创建一个对象都去在内存中加一遍一样的方法
Person.prototype.eating = function () {
    console.log(this.name + '在吃饭')
}
Person.prototype.running = function () {
    console.log(this.name + '在跑步')
}
var p1 = new Person('jam', 20, '北京市')
var p2 = new Person('tom', 14, '上海市')
var p3 = new Person('li', 13, '天津市')

console.log(p1)
// 输出结果：
//  Person {
//     name: 'jam',       
//     age: 20,
//     address: '北京市', 
//     eating: [Function],
//     running: [Function]
//   }
p1.eating()  // jam在吃饭

The last one is of course the finale. This prototype and constructor method is Currently the most widely used and recognized method of creating objects in 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.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of How to create multiple objects in JavaScript? Detailed explanation of four methods. For more information, please follow other related articles on the PHP Chinese website!