


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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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.

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.

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

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

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.

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 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.
