Common Ways to create objects js Factory pattern constructor pattern prototype pattern

In the previous article, I introduced you to the basics of OBJECT orientation in javascript, but this article continues to learn more about javascript object orientation. JS syntax is very flexible, and there are several different ways to create simple objects. These overly flexible areas can be quite confusing at times, so today we'll take a look at some of the most common ways to create objects in JS.

preface

While using the Object constructor or using object literals can easily be used to create one object, this approach has one obvious drawback: creating multiple objects using one interface creates a lot of redundant code. So in order to solve this problem, people began to use the following ways to common objects.

The factory pattern

This pattern abstracts the process of creating an object, using functions to create the details of an object with a specific interface

 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson(' Modest dragon ',' male ','100');
 p1.show();
 var p2 = cPerson(' hinata ',' female ','14');
 p2.show();

Factory mode testing

Problem with factory mode: Using factory mode, it is possible to create an object containing all the information, and this function can be called countless times. While it solves the problem of creating multiple similar objects, it does not solve the problem of object recognition (that is, how to know the type of an object)

Constructor pattern

function CPerson(name,sex,age) {// Note that there   The constructor is capitalized 
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson(' Modest dragon ',' male ','100');
 p1.show();
var p2 = new CPerson(' hinata ',' female ','14');
 p2.show();

Constructor pattern testing

Notice some differences between the constructor and the factory pattern, as follows

The constructor is capitalized

The object is not explicitly created

Assign attributes and methods to the this object

There are no return statements

And calling the constructor in this way takes a couple of steps

Create 1 new object

Assign the constructor scope to this object (so this points to this object)

Executing code in a constructor (that is, adding properties and methods to a new object)

Returns the object

Note: constructors are not much different from normal functions except for the way they are called. The following illustrates the different invocation styles

 //  Call way 1 new  way 
 var p1 = new CPerson(' Modest dragon ',' male ','100');
 p1.show();// Modest dragon  100  male 
 //  Call way 2  Normal function call 
 CPerson(' Modest dragon ',' male ','100');
 window.show()// Modest dragon  100  male   Note that properties and methods will be set to window On the object 
 //  Call way 3  On the other 1 Calls within the scope of an object 
 var obj = new Object();
 CPerson.call(obj,' Modest dragon ',' male ','100');
 obj.show(); // Modest dragon  100  male   in obj The scope of the 

Constructor issues: The main problem with constructors is that each method is recreated once on each instance. Both p1 and p2 have show methods, but they are not instances of the same Function, because function is also an object in js. Therefore, their common show method is not equal.

The prototype pattern

Each function has an prototype attribute, which is a pointer to an object. The purpose of this object is to contain properties and methods that can be Shared by all instances of a particular type. That is, the prototype object of the object created by calling the constructor

The benefit is the method by which all instances of an object can share its properties. That is, you do not need to define the instance information in the constructor

 function CPerson(){
}
CPerson.prototype.name=' Modest dragon ';
CPerson.prototype.sex=' male ';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); // Modest dragon  100  male 
var p2 = new CPerson();
 p2.show();// Modest dragon  100  male 
 console.log(p1.show == p2.show)//true

The above is about the common ways to create objects (factory mode, constructor mode, prototype mode) in js. I hope you enjoy it.