Summary of common methods for creating classes in JS [factory method, constructor method, prototype method, joint method, etc.]

This article describes common methods of creating classes in JS. Share it for your reference, as follows:

Javascript is an object-based language, and almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because it does not have Class in its syntax. (However, ES6 introduced the concept of Class as a template for objects. Class keywords can be used to define classes. Getting started with ES6:/).

However, in project development, JS is often used to object-oriented development, which requires us to use JS to create classes to instantiate some objects. Next, let’s introduce several ways to create classes in JS:

1. Factory method:

//Create an object through factory method, first define a factory methodfunction createObj(){
  var obj = new Object();
  ="xxx";
  =function(){
    alert("I'm xxx");
  }
  return obj;
}
//Calling factory method to create object:var obj1 = createObj();
//This form can also be usedfunction createObj(){
  var obj = {}; //Generate objects in this way  ="xxx";
  =function(){
    alert("I'm xxx");
  }
  return obj;
}
var obj1 = createObj();

The problem with this method is that every time an object is created through a factory method, the attribute name and method say of this object must be recreated once, wasting memory.

2. Constructor method:

//Create a constructor with the first letter of the constructor uppercasefunction Obj(){
  ="xxx";
  =function(){
    alert("I'm xxx");
  };
}
//Use the constructor to generate objects through new keywordvar obj1=new Obj();

This is the most basic method, but there are also the same problems as the factory method.

3. Prototype method:

//Create a class with an empty functionfunction Obj(){
}
//Add attributes and methods on the prototype chain of the class="xxx";
=function(){
  alert("I'm xxx");
}
//Generate objectvar obj1=new Obj();

The disadvantage of this method is that when there is a reference attribute, changing the attribute of one object will also change the attribute of other objects. Because a reference attribute points to the same place.

4. Prototype/construction joint method

//Define non-function properties of an object using a constructorfunction Obj(name){
  =name;
  =new Array('a','b');
}
//How to define objects using prototype=function(){
  alert("I'm xxx");
}
//Generate objectvar obj1 = new Obj('xxx');

This is the most commonly used way to create classes and objects, encapsulating methods and attributes in different ways.

5. Dynamic prototype method

//The principle of dynamic prototype method is similar to the prototype/construction hybrid method. The only difference is the position of the object methodfunction Person(name, sex) {
   = name;
   = sex;
  if (typeof  != "function") {
     = function () {
      alert();
    }
  }
}
var man =new Person ("Caesar", "male");
();//Caesar

The dynamic prototype pattern is to encapsulate all information into the constructor. The constructor will only add it to the prototype if it does not exist using say. This code will only be executed on the first call.

There are three steps to instantiate the obj object:

1. Create an obj object:

obj=new Object();

2. Point obj's internal __proto__ to the prototype of the function Obj that constructs its function, and at the same time, ===, so that it points (===). It is two different things with the internal _proto_. When instantiating the object, it uses _proto_. Obj does not have a prototype attribute, but has an internal __proto__. The prototype attributes and prototype methods on the prototype chain are obtained through __proto__.

3. Use obj as this to call the constructor Obj, thereby setting members (i.e. object properties and object methods) and initializing them.

When these 3 steps are completed, the obj object has no connection with the constructor Obj. At this time, even if the constructor Obj adds any member, it will no longer affect the obj object that has been instantiated.

For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.