Table of Contents
1. Create multiple objects - literal method
2. Create multiple objects - factory pattern method
3. Create multiple objects—— Constructor method
#4. Create multiple objects - prototype plus constructor method
Home Web Front-end JS Tutorial How to create multiple objects in JavaScript? Detailed explanation of four methods

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

Jun 29, 2022 am 10:07 AM
javascript object-oriented

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.

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

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 + '在吃饭')
    }
}
Copy after login

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在吃饭
Copy after login

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在吃饭
Copy after login

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在吃饭
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Explore object-oriented programming in Go Explore object-oriented programming in Go Apr 04, 2024 am 10:39 AM

Go language supports object-oriented programming through type definition and method association. It does not support traditional inheritance, but is implemented through composition. Interfaces provide consistency between types and allow abstract methods to be defined. Practical cases show how to use OOP to manage customer information, including creating, obtaining, updating and deleting customer operations.

PHP Advanced Features: Best Practices in Object-Oriented Programming PHP Advanced Features: Best Practices in Object-Oriented Programming Jun 05, 2024 pm 09:39 PM

OOP best practices in PHP include naming conventions, interfaces and abstract classes, inheritance and polymorphism, and dependency injection. Practical cases include: using warehouse mode to manage data and using strategy mode to implement sorting.

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

Analysis of object-oriented features of Go language Analysis of object-oriented features of Go language Apr 04, 2024 am 11:18 AM

The Go language supports object-oriented programming, defining objects through structs, defining methods using pointer receivers, and implementing polymorphism through interfaces. The object-oriented features provide code reuse, maintainability and encapsulation in the Go language, but there are also limitations such as the lack of traditional concepts of classes and inheritance and method signature casts.

How to implement an online electronic signature system using WebSocket and JavaScript How to implement an online electronic signature system using WebSocket and JavaScript Dec 18, 2023 pm 03:09 PM

Overview of how to use WebSocket and JavaScript to implement an online electronic signature system: With the advent of the digital age, electronic signatures are widely used in various industries to replace traditional paper signatures. As a full-duplex communication protocol, WebSocket can perform real-time two-way data transmission with the server. Combined with JavaScript, an online electronic signature system can be implemented. This article will introduce how to use WebSocket and JavaScript to develop a simple online

WebSocket and JavaScript: Key technologies for realizing real-time online financial news WebSocket and JavaScript: Key technologies for realizing real-time online financial news Dec 17, 2023 pm 11:21 PM

WebSocket and JavaScript: Key technologies for realizing real-time online financial news Introduction: With the development of the Internet, real-time online financial news has become more and more important to investors and financial practitioners. Traditional network communication methods are difficult to achieve real-time updates, but the WebSocket protocol and JavaScript provide an efficient and reliable solution. This article will introduce the basic principles of WebSocket and JavaScript, and demonstrate how to use it through specific code examples.

See all articles