Several common ways to create objects in js object-oriented (factory mode, constructor mode, prototype mode)

In the previous article, I introduced it to youjavascript object-oriented basics, This article continues to learn javascript object-oriented in depth. The syntax of JS is very flexible, and there are several different methods for simple object creation. These overly flexible places are sometimes confusing, so today we will sort out several common methods of creating objects in JS.

Preface

Although using Object constructors or Object literals can be conveniently used to create an object, this method has an obvious disadvantage: creating multiple objects with one interface will produce a lot of redundant code. Therefore, in order to solve this problem, people began to use the following ways to common objects.

Factory model

This pattern abstracts the specific process of creating objects, using functions to create objects with specific interfaces

 function cPerson(name,sex,age){
 var o = new Object();
  = name;
  = sex;
  = age;
  = function(){
 (,,);
 }
 return o;
}
 var p1 = cPerson('Qianlong','male','100');
 ();
 var p2 = cPerson('Hinata','female','14');
 ();

Factory mode testing

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

Constructor mode

function CPerson(name,sex,age) {//Note here the constructor's first letter is capitalized  = name;
  = sex;
  = age;
  = function () {
 (, , );
 }
}
var p1 = new CPerson('Qianlong','male','100');
 ();
var p2 = new CPerson('Hinata','female','14');
 ();

Constructor pattern testing

Note that the constructor is somewhat different from the factory pattern, as follows

Constructor initial letter capitalize

No explicit creation of objects

Assign attributes and methods to this object

No return statement

And calling the constructor in this way will go through a few steps

Create a new object

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

Execute code in the constructor (i.e. the process of adding properties and methods to new objects)

Return object

Note: The constructor is actually not much different from ordinary functions. The only difference lies in the different calling methods.The following demonstrates several different calling methods

 // Call method 1 new method var p1 = new CPerson('Qianlong','male','100');
 ();//Qianlong 100 male // Call method 2 Normal function call CPerson('Qianlong','male','100');
 ()//Qianlong 100 male Note that attributes and methods will be set to the window object // Call method 3 Call in the scope of another object var obj = new Object();
 (obj,'Qianlong','male','100');
 (); //Qianlong 100 male existobjScope of

The problem with constructor: The main problem with using constructors is that each method must be recreated on each instance. There are show methods for p1 and p2, but they are not instances of the same Function, because function is also an object in js. Therefore, the show method they share is not equal.

Prototype mode

Each function has a prototype property, which is a pointer, pointing to an object. And the purpose of this object is to contain properties and methods that can be shared by all instances of a specific type. That is, the prototype object of the object created by calling the constructor

The advantage is that it allows all instances of objects to share their properties. That is, there is no need to define the instance information in the constructor

 function CPerson(){
}
='Qianlong';
='male';
=100;
=function(){
 (, , );
}
var p1 = new CPerson();
 (); //Qianlong 100 malevar p2 = new CPerson();
 ();//Qianlong 100 male ( == )//true

The above content is about several common ways to create objects in js object-oriented (factory mode, constructor mode, prototype mode). I hope everyone likes it.