Explanation of methods of defining classes in JS

There are many ways to define classes in JS:

1. Factory method

  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, a new object will be created and all properties and methods will be given to it. . Use this function to create 2 objects with exactly the same properties. Of course, my sister can modify this method 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"

Now you can get objects with different values ​​by passing different parameters to the function.
In the previous example, showcolor() must be created every time the function Car() is called, which means that each object has its own showcolor() method.

But in fact, each object bucket shares the same function.
Although you can define a method outside a function and then point the function's attributes to the method.

 function showColor(){ 
   alert(this.color); 
  } 
  function Car(){ 
   var ocar = new Object(); 
   ocar.color = color; 
   ocar.doors = door; 
   ocar.showColor = showColor; 
   return ocar; 
  }

But this doesn’t look like a function method.
2, Constructor method
The constructor method is as simple as the factory method, as shown below:

function Car(color,door){ 
   this.color = color; 
   this.doors = door; 
   this.showColor = function(){ 
    alert(this.color) 
   }; 
  } 
  var car1 = new Car("red",4); 
  var car2 = new Car("blue",4);

You can see that the constructor method has no inside the function To create an object , use the this keyword. Because the object has been created when the constructor is called, and only this can be used to access object properties inside the function.
Now use new to create objects, it looks like that! But it's the same as the factory approach. Each call creates its own method for the object.
3. Prototype method
This method uses the prototype attribute of the object. First the class name is created with an empty function, then all properties and methods are assigned the prototype attribute.

  function Car(){ 
  } 
  Car.prototype.color = "red"; 
  Car.prototype.doors = 4; 
  Car.prototype.showColor = function(){ 
   alert(this.color); 
  } 
  var car1 = new Car(); 
  var car2 = new Car();

In this code, an empty function is first defined, and then the properties of the object are defined through the prototype attribute. When this function is called, all properties of the prototype will be immediately assigned to the object to be created. All objects of this function store pointers to showColor(), and syntactically they all appear to belong to the same object.
But this function has no parameters, and the properties cannot be initialized by passing parameters. The default value of the properties must be changed after the object is created.
A very serious problem with the prototype method is when the property points to an object, such as an array.

  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

Here, since the reference value of the array, the two objects of Car point to the same array, so when the value is added to car1, it can also be seen in car2.
Union is a method that uses constructor/prototype methods to create objects like other programming languages. It uses constructors to define non-functional attributes of objects and prototype methods to define 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

5. Dynamic prototype method
The principle of dynamic prototype method is similar to that of mixed constructor/prototype method. The only difference is where the object methods are assigned.

  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 prototype method uses a flag to determine whether a method has been assigned to the prototype. This ensures that the method is only created once
6. Mixed factory method
Its purpose is to create a fake constructor and only return a new instance of another object.

 function Car(){ 
   var ocar = new Object(); 
   ocar.color = "red"; 
   ocar.doors = 4; 
   ocar.showColor = function(){ 
    alert(this.color) 
   }; 
   return ocar; 
  }

The difference from the factory method is that this method uses the newoperator.
The above are all the methods to create objects. The most widely used method at present is the mixed constructor/prototype method. In addition, the dynamic prototype method is also very popular. Functionally equivalent to the constructor/prototype approach.

Related articles:

Explanation of basic syntax and variables of JavaScript

Explanation of some basic and commonly used methods in js

Detailed answers to js basic syntax

The above is the detailed content of Explanation of methods of defining classes in JS. For more information, please follow other related articles on the PHP Chinese website!