A method summary that defines a class in javascript

There are many ways to define a class in JS:

1. Factory mode

  function Car(){ 

   var ocar = new Object; 

   ocar.color = "blue"; 

   ocar.doors = 4; 

   ocar.showColor = function(){ 

    document.write(this.color) 

   }; 

   return ocar; 

  } 

  var car1 = Car(); 

  var car2 = Car(); 

When this function is called by  , a new object is created and given all its properties and methods. You can use this function to create two objects with identical properties. Of course my sister can modify this by passing parameters to it.

  function Car(color,door){ 

   var ocar = new Object; 

   ocar.color = color; 

   ocar.doors = door; 

   ocar.showColor = function(){ 

    document.write(this.color) 

   }; 

   return ocar; 

  } 

  var car1 = Car("red",4); 

  var car2 = Car("blue",4); 

  car1.showColor()  //output:"red" 

  car2.showColor()  //output:"blue" 

  can now get objects with different values by passing different arguments to functions.
  in the previous example, each time the function Car() is called, showcolor() is created, meaning that each object has its own showcolor() method.

  but in fact, each object bucket shares the same function.
 , though, can define a method outside of a function and then point the function's properties to that method.

  function showColor(){ 

   alert(this.color); 

  } 

  function Car(){ 

   var ocar = new Object(); 

   ocar.color = color; 

   ocar.doors = door; 

   ocar.showColor = showColor; 

   return ocar; 

  } 

  but that doesn't look like a functional method.
2. Constructor mode  
The   constructor method is as simple as the factory method 1, as shown below:

  function Car(color,door)

  can see that the constructor method does not create objects inside the function, but instead USES the this keyword. Because the object is already created when the constructor is called, only this can be used to access the object properties inside the function.
  now USES new to create objects, and it looks like that! But it is the same as the factory way. Each call creates its own method for the object.

3. Prototype mode

This approach takes advantage of the prototype properties of the object. The class name is first created with an empty function, and then all the properties and methods are assigned prototype properties.

  function Car()

In this code,   first defines an empty function, and then defines the properties of the object through the prototype properties. When this function is called, all properties of the stereotype are immediately assigned to the object to be created, and all objects of this function hold Pointers to showColor(), which syntactically appear to belong to the same object.
 , however, has no parameters, so it is not possible to initialize the property by passing the parameters. The default value of the property can only be changed after the object is created.
A serious problem with the   stereotype approach is when attributes point to objects, such as groups.

  function Car(){ 

  } 

  Car.prototype.color = "red"; 

  Car.prototype.doors = 4; 

  Car.prototype.arr = new Array("a","b"); 

  Car.prototype.showColor = function(){ 

   alert(this.color); 

  } 

  var car1 = new Car(); 

  var car2 = new Car(); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 

  alert(car2.arr);  //output:aa,bb,cc 

In  , both objects of Car refer to the same array due to the reference value of the array, so when you add a value to car1, you can also see it in car2.
  union is a constructor/prototype method for creating objects like other programming languages 1, a constructor method for defining non-functional properties of objects, and a prototype method for defining objects.

  function Car(color,door){ 

   this.color = color; 

   this.doors = door; 

   this.arr = new Array("aa","bb"); 

  } 

  Car.prototype.showColor(){ 

   alert(this.color); 

  } 

  var car1 = new Car("red",4); 

  var car2 = new Car("blue",4); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 

  alert(car2.arr);  //output:aa,bb 

4. Dynamic prototyping

The   dynamic prototyping approach works in a similar way to the hybrid constructor/prototype approach. The only difference with 1 is the location of the method assigned to the object.

  function Car(color,door){ 

   this.color = color; 

   this.doors = door; 

   this.arr = new Array("aa","bb"); 

   if(typeof Car._initialized == "undefined"){ 

    Car.prototype.showColor = function(){ 

     alert(this.color); 

    }; 

    Car._initialized = true; 

   } 

  }

The   dynamic prototyping approach USES a flag to determine if a method has been assigned to the prototype. This ensures that the method is created only once

6. Mixed factory mode

 's destination creates a dummy constructor that returns only a new instance of another type of object.

  function Car(){ 

   var ocar = new Object(); 

   ocar.color = "red"; 

   ocar.doors = 4; 

   ocar.showColor = function(){ 

    alert(this.color) 

   }; 

   return ocar; 

  } 

  differs from the factory approach in that it USES the new operator.  

PS(personal understanding) :

1) the members (methods or properties) defined by class through prototype are common to every class object. 1 is generally not used to define the member properties. One object modifies the property value, and all objects are modified;

2) class has prototype attribute, class object does not;

3) the statement defining the class (function) will be executed once every time the new class object or the class is directly called (in the following factory method form) (the singleton mode can avoid this situation);

4) class is function type, class object is object type, only function type is prototype attribute;

5) the methods defined by prototype cannot access the private variables of the class (local variables defined by the class), but the member properties and member methods of the class (variables and methods defined by this) can be accessed through this;

6) how to define a class:

Factory mode (Object)

b. Mode of inheritance (prototype)

c. Constructor mode (this)

d. Mixed mode

7) [question] why can properties defined by prototype be changed by any object? Properties defined in constructor mode belong to objects and do not affect property values of other objects. Right?

  is all about creating object methods. The most widely used is the hybrid constructor/prototype approach, and the dynamic prototype approach is also popular. Functionally equivalent to the constructor/prototype approach.