This article mainly describes the definition of classes or objects in JS. If you need them, you can refer to them and hope to help us know that JS is object-oriented. When it comes to object orientation, it is inevitable to involve the concept of classes. Generally, strong languages such as c # and java have fixed syntax for defining classes. The difference between JS is that it can use various methods to implement its own classes and objects. The following methods are generally implemented:
1. Factory method
The factory method is to create a factory function that returns a specific object type. The sample code is as follows:
The Code is as follows:
Function createCar (sColor, iDoors, iMpg)
{
Var oTempCar = new Object;
OTempCar. color = sColor;
OTempCar. doors = iDoors;
OTempCar. mpg = iMpg;
OTempCar. showColor = function ()
{
Alert (this. color );
}
Return oTempCar;
}
Var oCar1 = createCar ("red", 4,23 );
Var oCar2 = createCar ("blue", 3,25 );
OCar1.showColor ();
OCar2.showColor ();
In this way, each time you call its factory function, a new object is created. The problem is that the showColor function must be created every time a new object is generated, so that each object has its own showColor version. In fact, all objects share the same function. to solve this problem, the developer defines the object method outside the factory function, and then gives the object a pointer pointing to this function, as shown below:
The Code is as follows:
Function showColor ()
{
Alert (this. color );
}
Function createCar (sColor, iDoors, iMpg)
{
Var oTempCar = new Object;
OTempCar. color = sColor;
OTempCar. doors = iDoors;
OTempCar. mpg = iMpg;
OTempCar. showColor = showColor;
Return oTempCar;
}
Var oCar1 = createCar ("red", 4,23 );
Var oCar2 = createCar ("blue", 3,25 );
OCar1.showColor ();
OCar2.showColor ();
In this way, you do not need to create your own showColor function for each object, but just create a pointer to this function. This solves the problem in terms of functionality, but this function is not like the object method. Therefore, the constructor method is introduced.
2. constructor Method
The constructor is similar to the factory function. The sample code is as follows:
The Code is as follows:
Function Car (sColor, iDoors, iMpg)
{
This. color = sColor;
This. doors = iDoors;
This. mpg = iMpg;
This. showColor = function ()
{
Alert (this. color );
}
}
Var oCar1 = new Car ("red", 4,23 );
Var oCar2 = new Car ("blue", 3,25 );
In the constructor, no object is created internally, but this keyword is used. When the new operator is used to call the constructor, an object is created before the first line of code is executed. Only this can be used to access this object. But what problems will this encounter? Obviously, each of its objects will also create their own showColor function versions. To solve this problem, the following prototype method is introduced.
3. Prototype
This method uses the prototype attribute of the object to view it as the prototype on which the object is created. Here, we use an empty constructor to set the class name. Then, all methods and attributes are directly assigned to the prototype attribute. As follows:
The Code is as follows:
Function Car ()
{}
Car. prototype. color = "red ";
Car. prototype. doors = 4;
Car. prototype. mpg = 23;
Car. prototype. drivers = new Array ("Mike", "Sue ");
Car. prototype. showColor = function ()
{
Alert (this. color );
}
The prototype method can only assign values directly, but cannot pass the parameter initialization attribute value to the constructor. When using this method, you may encounter two problems. The first problem is that you must create each object in this way before changing the default value of the attribute. Instead, each object cannot have its own attribute values. This is annoying. The second problem is that attributes refer to objects. Function sharing does not cause any problems, but object sharing does. Because each instance generally needs to implement its own object.
As shown below:
The Code is as follows:
Var oCar1 = new Car ();
Var oCar2 = new Car ();
OCar1.drivers. push ("Matt ");
Alert (oCar1.drivers); // output "Mike, Sue, Matt"
Alert (oCar2.drivers); // output "Mike, Sue, Matt"
Therefore, the drivers attribute is only a pointer to an object, so all instances actually share the same object. Due to these problems, the following constructor and prototype methods are introduced.
4. Mixed Constructors/prototype
The idea of this method is to use constructors to define all non-function attributes of an object (including common attributes and attributes pointing to an object) and define the function attributes (methods) of an object in prototype ). As a result, all functions are created only once, and each object has its own object attribute instance. The sample code is as follows:
The Code is as follows:
Function Car (sColor, iDoors, iMpg)
{
This. color = sColor;
This. doors = iDoors;
This. mpg = iMpg;
This. drivers = new Array ("Mike", "Sue ");
}
Car. prototype. showColor = function ()
{
Alert (this. color );
}
Var oCar1 = new Car ("red", 4,23 );
Var oCar2 = new Car ("blue", 3,25 );
OCar1.drivers. push ("Matt ");
Alert (oCar1.drivers); // output "Mike, Sue, Matt"
Alert (oCar2.drivers); // output "Mike, Sue"
The instance Code shows that this method solves the two problems of the previous method at the same time. However, some developers still feel that this method is not perfect.
5. Dynamic Prototype
We know that most object-oriented languages visually encapsulate attributes and methods. The showColor method of the preceding method is defined outside the class. Therefore, they designed a dynamic prototype method. The basic idea of this method is the same as the mixed constructor/prototype method. The only difference lies in the location of the object method. As follows:
The Code is as follows:
Function Car (sColor, iDoors, iMpg)
{
This. color = sColor;
This. doors = iDoors;
This. mpg = iMpg;
This. drivers = new Array ("Mike", "Sue ");
If (typeof Car. _ initialized = "undefined ")
{
Car. prototype. showColor = function ()
{
Alert (this. color );
}
}
Car. _ initialized = true;
}
In this way, Car. prototype. showColor is created only once. This code is more similar to the class definition in other languages.
6. Hybrid Factory
This method is usually not applicable to the previous method. The objective is to create a pseudo constructor and return only new instances of another object.
The Code is as follows:
Function createCar ()
{
Var oTempCar = new Object;
OTempCar. color = "red ";
OTempCar. doors = 4;
OTempCar. mpg = 23;
OTempCar. showColor = function ()
{
Alert (this. color );
};
Return oTempCar;
}
Var car = new Car ();
Because the new operator is called inside the Car () constructor, the second new operator is automatically ignored. Objects Created within the constructor are passed back to the variable var. This method has the same problems as the classic method in the internal management of object methods. Therefore, we strongly recommend that you do not use this method unless you have.
