There are many ways to define classes in JS:
1. Factory method
The code copy is as follows:
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 is created and all properties and methods are assigned. 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.
The code copy is as follows:
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, each time the function Car() is called, showcolor() is created, which means that each object has its own showcolor() method.
But in fact, each object shares the same function.
Although a method can be defined outside the function, then by pointing the function's properties to the method.
The code copy is as follows:
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:
The code copy is as follows:
function Car(color,door)
You can see that the constructor method does not create objects inside the function, and the keyword this is used. Because an object has been created when calling the constructor, and this can only be used to access the object properties within the function.
Now use new to create objects, it looks like that! But it's the same as the factory. Each call creates its own method for the object.
3. Prototype method
This method takes advantage of the prototype attribute of the object. First, create the class name with an empty function, and then all attributes and methods are assigned to the prototype attribute.
The code copy is as follows:
function 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 assigned to the object to be created immediately. All objects in this function store pointers to showColor(), which syntactically seems to belong to the same object.
However, this function has no parameters, and the attribute cannot be initialized by passing parameters. The default value of the attribute must be changed after the object is created.
A very serious problem with the prototype method is that when the attribute points to an object, such as an array.
The code copy is as follows:
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, because of the reference value of the array, both Car objects point to the same array, so when the value is added in car1, you can also see it in car2.
Union is a method that can create objects like other programming languages using constructor/prototype. It is a method that uses constructors to define non-functional properties of objects and uses prototypes to define objects.
The code copy is as follows:
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 prototype method
The dynamic prototype method is similar to the mixed constructor/prototype method. The only difference is the position given to the object's method.
The code copy is as follows:
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 is to use a flag to determine whether the prototype has been assigned a method. This ensures that the method is created only once
6. Mixed factory method
Its purpose teacher creates a fake constructor that returns only new instances of another object.
The code copy is as follows:
function Car(){
var ocar = new Object();
ocar.color = "red";
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
Unlike the factory method, this method uses the new operator.
PS (personal understanding):
1) The members (methods or attributes) defined by the class through prototype are shared by each class object. They are generally not used to define member attributes. If an object modifies the attribute value, all objects are modified;
2) The class has a prototype attribute, but the class object does not;
3) Every time a new class object or a class is called directly (the following factory method form), the statement that defines the class (function) will be executed once (singleton pattern can avoid this situation);
4) The class is function type, the class object is object type, and only the function type is prototype attribute;
5) The method 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:
a. Factory method (Object)
b.Inheritance method (prototype)
c.Constructor method (this)
d. Mixed method
7) [Question] Why can attributes defined through prototype be changed through any object? The attributes defined in the constructor method only belong to the object and will not affect the attribute values of other objects?
The above are all the methods of creating objects. The most widely used method is the hybrid constructor/prototype method, and dynamic prototype method is also very popular. Functionally equivalent to the constructor/prototype method.