Four ways to create multiple objects in JavaScript

This article brings you relevant knowledge about javascript, which mainly introduces the relevant content about creating multiple objects, including literal methods, factory pattern methods, constructors and prototypes Let’s take a look at the issue of adding constructor methods. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end]

We often You will 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 available by default. Writable, enumerable, configurable.

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 this factory method we can generate the desired objects;

The following code shows the operation of using the factory mode 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在吃饭

As can be seen The code used to create three objects using the factory pattern method is obviously many fewer lines than the literal code, 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 to define instance attributes on the constructor, then when creating Only these parameters need to be passed in on 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.

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

The above is the detailed content of Four ways to create multiple objects in JavaScript. For more information, please follow other related articles on the PHP Chinese website!