For the inheritance of classes in javascript, please refer to Ruan Yifeng's blog.Design idea of Javascript inheritance mechanism》, very thoroughly.
1. Problems encountered in instantiation in javascript:
The following is an example from "Javascript Advanced Programming" to illustrate. If a car object is now defined, it is an instance of the Object class. Like the following:
Copy the codeThe code is as follows:
var oCar=new Object();
= "red";
= 4;
= 23;
= function () {
alert();
};
Now you need another instance like this, you might define it like this:
Copy the codeThe code is as follows:
var oCar2 = new Object();
= "blue";
= 5;
= 25;
= function () {
alert();
};
The problem encountered in this way is that each object needs to redefine its fields and methods once. Very troublesome.
2. Class definition-factory implementation:
Let’s wrap the above example and use the return value of the function to make a work:
Copy the codeThe code is as follows:
function createCar() {
var oTempCar = new Object();
= "red";
= 4;
= 23;
= function () {
alert();
};
return oTempCar;
}
Call method:
var oCar1 = createCar();
var oCar2 = createCar();
This method is called the factory method. The factory method seems to be much more troublesome. At least when creating an object, there is no need to have so many row counts. Because the value of each attribute (color, doors, mpg) is fixed, it needs to be modified again and used to implement it by parameter passing:
Copy the codeThe code is as follows:
function createCar(sColor, iDoors, iMpg) {
var oTempCar = new Object();
= sColor;
= iDoors;
= iMpg;
= function () {
alert();
};
return oTempCar;
}
var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("red", 4, 23);
();
();
This seems to be able to implement the object. The implementation is also very simple and the call is very convenient. But there are two things that are not very good:
1. Semantically, the new operator is not used when creating an object, which seems not so formal (usually, a new operator is used to create an object).
2. Does not conform to object-oriented features - encapsulation. In this example, oCar1 and oCar2 have their own showColor methods, and their showColors are both their own implementations. But the truth is that they share the same function.
There is also a way to solve the problem of this shared function, using function pointers to solve it. Create a showColor function outside the createCar function, and the oTempCar's showColor method points to this showColor function:
Copy the codeThe code is as follows:
function showColor() {
alert();
}
function createCar(sColor, iDoors, iMpg) {
var oTempCar = new Object();
= sColor;
= iDoors;
= iMpg;
= showColor;
return oTempCar;
}
var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("red", 4, 23);
();
();
Although this solves the problem of repeatedly creating functions, in this way, the showColor function does not look like an object method.
3. Class definition-constructor implementation:
Copy the codeThe code is as follows:
function Car(sColor, iDoors, iMpg) {
//In the form of a constructor, independent properties and functions will be generated for each object.
= sColor;
= iDoors;
= iMpg;
= function () {
alert();
};
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("red", 4, 23);
();
();
In the Car class, this pointer represents an instance of Car, so no return value is required. Although the constructor method implements the definition of the class, it also creates a separate method for each instance, just like the factory method. Although it is possible to create another function outside the function like a factory function to solve this problem by using pointers, it is semantically meaningless if you do so.
4. Class definition-prototype implementation:
Use the prototype property of the object and treat it as the prototype on which a new object depends. Use an empty constructor to set the class name. Then all attributes and methods are directly assigned to the prototype attribute.
Copy the codeThe code is as follows:
function Car() {
}
= "red";
= 4;
= 23;
= function () {
alert();
};
var oCar1 = new Car();
var oCar2 = new Car();
alert(oCar1 instanceof Car);//output true There are two problems here:
1. The constructor has no parameters. When using prototypes, you cannot initialize the property value by passing parameters to function parameters.
2. When there are multiple instances, changes to the properties of one instance will affect the properties of another instance.
Test code:
Copy the codeThe code is as follows:
var oCar1 = new Car();
= "Green";
var oCar2 = new Car();
= "Black";
alert(); //output Green
alert(); //output Black
alert(); //output Black
Of course, there will be a way to solve this problem. That's the mixed constructor/prototype method
5. Class implementation--Mixed constructor/prototype implementation
This implementation method is to implement the shared attributes or methods in the instance of each class into the prototype chain, and implement the attributes and methods that do not require shared implementation in the constructor. This class implementation method is the most widely used method.
Copy the codeThe code is as follows:
function Car(sColor, iDoors, iMpg) {
= sColor;
= iDoors;
= iMpg;
= new Array("Mike", "Sue");
}
= function () {
alert();
};
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 24);
("Matt");
alert();
alert(); 6. Class definition--dynamic prototype implementation
This approach provides a friendly programming style compared to the mixed constructor/prototype approach (in the mixed constructor/prototype approach, the definition of the showColor method is implemented in vitro rather than in vivo of the constructor method). There are many ways to define this kind of class.
Copy the codeThe code is as follows:
function Car(sColor, iDoors, iMpg) {
= sColor;
= iDoors;
= iMpg;
= new Array("Mike", "Sue");
if (typeof Car._initialized == "undefined") {
= function () {
alert();
};
Car._initialized = true;
}
7. Class definition--Implementation of hybrid factory method
Copy the codeThe code is as follows:
function Car() {
var oTempCar = new Object();
= "red";
= 4;
= 23;
= function () {
alert();
};
return oTempCar;
}
var car = new Car();
();
This method looks similar to the factory method. Since the new operator is called inside the Car() constructor, the new operator outside the constructor will be ignored. Objects created inside the constructor are passed back to the variable var. Although it seems that new operator has made some progress over the factory method, this implementation method will also have the problem of repeated creation methods. Therefore, this method is not recommended to define classes.