Definition and method of classes in javascript (Study Notes in javascript advanced programming)

For the inheritance of classes in javascript, refer to Ruan Yifeng's Blog "design idea of Javascript Inheritance Mechanism.

I. Problems Encountered in javascript instantiation:

The following describes how to use the example in javascript advanced programming. If a car Object is defined, it is an instance of the Object class. As shown below:
Copy codeThe Code is as follows:
Var oCar = new Object ();
OCar. color = "red ";
OCar. doors = 4;
OCar. mpg = 23;
OCar. showColor = function (){
Alert (this. color );
};

Now another such instance is needed. You may define it like this:
Copy codeThe Code is as follows:
Var oCar2 = new Object ();
OCar2.color = "blue ";
OCar2.doors = 5;
OCar2.mpg = 25;
OCar2.showColor = function (){
Alert (this. color );
};

The problem is that each object needs to redefine its fields and methods once. Very troublesome.

Ii. Class Definition-factory implementation:

The preceding example is packaged and the return value of the function is used as an example:
Copy codeThe 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;
}

Call method:

Var oCar1 = createCar ();
Var oCar2 = createCar ();

This method is called the factory method. The factory method seems to be much easier. At least the number of rows is not required when creating an object. Because the values of each attribute (color, doors, and mpg) are fixed, we need to perform another transformation and use parameter transfer to implement the following:
Copy codeThe 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 ("red", 4, 23 );

OCar1.showColor ();
OCar2.showColor ();

It seems that the object can be implemented. The implementation is also very simple, and the call is also very convenient. But there are two not good points:

1. In terms of semantics, the new operator is not used when an object is created, and it does not seem so formal (an object is usually created using a new operator ).

2. It does not conform to the object-oriented feature-encapsulation. In this example, both oCar1 and oCar2 have their own showColor methods, and their showColor is implemented by themselves. But the fact is that they share the same function.

There is also a way to solve the problem of this shared function by using the function pointer. Create a showColor function in addition to the createCar function, and the showColor method of oTempCar points to this showColor function:
Copy codeThe 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 ("red", 4, 23 );

OCar1.showColor ();
OCar2.showColor ();

Although this solves the problem of repeatedly creating functions, in this case, the showColor function does not look like an object method.

Iii. Class Definition-constructor implementation:
Copy codeThe Code is as follows:
Function Car (sColor, iDoors, iMpg ){
// The constructor generates independent attributes and functions for each object.
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 ("red", 4, 23 );
OCar1.showColor ();
OCar2.showColor ();

In the Car class, this pointer represents an instance of the Car, so no return value is required. Although the constructor method implements the class definition, like the factory method, it also creates a separate method for each instance. Although a function can be created outside the function just like a factory function to solve this problem using pointers, doing so has no meaning in semantics.

Iv. Class Definition-prototype implementation:

The prototype attribute of the object is used as the prototype on which the new object is created. Use an empty constructor to set the class name. Then all attributes and methods are directly assigned the prototype attribute.
Copy codeThe Code is as follows:
Function Car (){

}
Car. prototype. color = "red ";
Car. prototype. doors = 4;
Car. prototype. mpg = 23;
Car. prototype. showColor = function (){
Alert (this. color );
};

Var oCar1 = new Car ();
Var oCar2 = new Car ();
Alert (oCar1 instanceof Car); // output true there are two problems:

1. the constructor has no parameters. When a prototype is used, the attribute value cannot be initialized by passing parameters to function parameters.

2. When multiple instances exist, changing the attributes of one instance affects the attributes of another instance.

Test code:
Copy codeThe Code is as follows:
Var oCar1 = new Car ();
OCar1.color = "Green ";

Var oCar2 = new Car ();
OCar2.color = "Black ";
Alert (oCar1.color); // output Green
Alert (oCar2.color); // output Black
Alert (oCar1.color); // output Black

Of course, there will be a way to solve this problem. That is, the hybrid constructor/prototype.

V. Implementation of classes-Implementation of mixed Constructors/prototypes

This implementation method is to implement the shared attributes or methods in each class instance in the prototype chain, rather than placing the attributes and methods that do not need to be shared in the constructor for implementation. The class implementation method is the most widely used method.
Copy codeThe 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, 24 );

OCar1.drivers. push ("Matt ");
Alert (oCar1.drivers );
Alert (oCar2.drivers); 6. Class Definition-dynamic prototype implementation

Compared with the hybrid constructor/prototype method, this method provides a friendly programming style (in the hybrid constructor/prototype method, the showColor method is defined in vitro, instead of in the constructor method ). This type of definition is also used in many ways.
Copy codeThe Code is as follows:
Function Car (sColor, iDoors, iMpg ){
This. color = sColor;
This. doors = iDoors;
This. mpg = iMpg;
This. divers = new Array ("Mike", "Sue ");

If (typeof Car. _ initialized = "undefined "){
Car. prototype. showColor = function (){
Alert (this. color );
};
Car. _ initialized = true;
}

7. Class Definition-Implementation of hybrid Factory
Copy codeThe Code is as follows:
Function Car (){
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 ();
Car. showColor ();

This method looks similar to the factory method. Because the new operator is called inside the Car () constructor, the new operator located outside the constructor is ignored. Objects Created within the constructor are returned with the variable var. Although it seems that the new operator has made some progress over the factory method, this implementation method will also lead to the problem of repeated creation methods. Therefore, we do not recommend using this method to define classes.