Detailed analysis of four ways to create objects in Javascript

Preface

There are many ways to create objects using Javascript. Now let’s list four of them and list the advantages and disadvantages of each method, so you can choose and use it. Let’s take a look.

Factory model

 function createPerson(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; //Be sure to return, otherwise undefined:undefined } var person1 = new createPerson('Young',18); console.log(person1.name + ':' + person1.age);

Advantages: Factory pattern can solve the problem of creating multiple similar objects

Disadvantages: The object recognition problem has not been solved (how to determine the type of an object)

Constructor mode

 function Person(name,age){ this.name = name; this.age = age; } var person1 = new Person('Young',18); console.log(person1.name + ':' + person1.age);

Before talking about her pros and cons, let’s talk about her own story first.

Use constructors as functions

 function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ return this.name; } } //Use var person1 = new Person('Young', 18); person1.sayName(); console.log(person1.name + ':' + person1.age); //Calling Person('Wind', 18); console.log(window.sayName()); //Calling var obj = new Object(); Person.call(obj, 'bird', 100); console.log(obj.sayName());

Advantages and disadvantages of constructors

Advantages: Its instance can be identified as a specific type

Disadvantages: Each method must be recreated on each instance. Of course you can change it like this:

 function Person(name, age){ this.name = name; this.age = age; this.sayName = sayName; } function saysName(){ return this.name; }

Instead, call global functions, so there is no encapsulation. . . The following prototype mode can make up for this shortcoming

Prototype mode

 function Person(){ } Person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayName = function(){ return this.name; } var person1 = new Person(); console.log(person1.sayName()); var person2 = new Person(); console.log(person1.sayName()); alert(person1.sayName === person2.sayName); //person1 and person2 access the same sayName() function of the same group of attributes

Although the value saved in the prototype can be accessed through the object instance, the value stored in the prototype cannot be rewrited through the instance object

 function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young alert(person1.sayName==person2.sayName);//true

When we call person1.sayName , we will perform two searches in succession. The parser first determines whether the instance person1 has the sayName attribute. If there is, we will call our own attributes. If there is no, we will search for the attributes in the prototype.

 function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young delete person1.name; console.log(person1.sayName());//Young console.log(person2.sayName());//Young

Use the hasOwnPropertyType method to detect whether a property exists in the prototype or in the instance. The method is inherited from the Object, true in the instance and false in the prototype.

Use Object.keys() method to enumerate instance properties on objects

 function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var keys=Object.keys(Person.prototype); console.log(keys);//["name", "age", "sayName"]

Pros and cons of prototype mode

Advantages: No need to reiterate every method on each instance

Disadvantages: Very few people use prototype mode alone. . List of questions in detail

 function Person(){ } Person.prototype={ constructor:Person, name:'Young', age:18, friends:['Big','Pig'], sayName:function(){ return this.name; } }; var p1=new Person(); var p2=new Person(); p1.friends.push('Mon'); console.log(p1.friends);//["Big", "Pig", "Mon"] console.log(p2.friends);//["Big", "Pig", "Mon"]

It is precisely because instances generally have their own attributes, and we place them in Person.prototype here, so with the modification of p1, the entire instance and prototype are modified. Then, we can use a combination of constructor mode and prototype mode.

Use constructor mode and prototype mode in combination

 function Person(name,age){ this.name=name; this.age=age; this.friends=['Big','Pig']; } Person.prototype={ sayName:function(){ return this.name; } }; var p1=new Person('Young',18); var p2=new Person('Wind',78); p1.friends.push('Raganya'); console.log(p1.friends);//["Big", "Pig", "Raganya"] console.log(p2.friends);//["Big", "Pig"] console.log(p1.friends==p2.friends);//false console.log(p1.sayName==p2.sayName);//true

This pattern is currently the most widely used and most recognized method of creating custom types. is a default mode used to define reference types.

Summarize

The above is all about analyzing the way objects are created in Javascript. The four methods and their advantages and disadvantages have been summarized by this article. I hope it can be helpful for everyone to learn to use Javascript.