The definition and method of classes in javascript ("javascript advanced programming" study notes)_js object-oriented

Regarding class inheritance in JavaScript, you can refer to Ruan Yifeng’s Blog "Design Ideas of Javascript Inheritance Mechanism", which is very thorough.

1. Problems encountered when instantiating in javascript:

The following uses the example in "Javascript Advanced Programming" to illustrate. If a car object is now defined, it is an instance of the Object class. Like the following:

Copy code The code is as follows:

var oCar=new Object() ;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function () {
alert(this.color) ;
};

Now you need such an instance, you might define it like this:

Copy code The 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 encountered in this way is that each object All need to redefine his fields and methods. Very troublesome.

2. Class definition - factory method implementation:

Wrap the above example and use the return value of the function to make an article:

Copy code 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;
}

Calling method:

var oCar1 = createCar();
var oCar2 = createCar();

This method is called factory method. The factory method seems to be much easier. At least you no longer need so many lines when creating an object. Because the value of each attribute (color, doors, mpg) is fixed, it needs to be transformed again, using parameter passing:

Copy code 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("red", 4, 23);

oCar1. showColor();
oCar2.showColor();

This seems to be able to achieve 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. From a semantic point of view, the new operator is not used when creating an object, which does not seem to be very formal (usually creating an object is implemented using a new operator) ).

2. Does not conform to the object-oriented characteristics - encapsulation. In this example, oCar1 and oCar2 both have their own showColor methods, and their showColor implementations are their own. But the fact is that they share the same function.

There is also a way to solve this problem of shared functions, using function pointers. Create a showColor function outside the createCar function, and the showColor method of oTempCar points to this showColor function:

Copy code 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("red", 4, 23);

oCar1.showColor();
oCar2.showColor();

Although this solves the problem of repeatedly creating functions, it makes the showColor function not look like an object method.

3. Class definition--Constructor method implementation:

Copy code The 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
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 Car, so there is no need to return a value. Although the constructor method implements the definition of the class, like the factory method, it also creates a separate method for each instance. Although you can create a function outside the function like a factory function to use a pointer to solve this problem, doing so is semantically meaningless.

4. Class definition - prototype implementation:

Use the prototype attribute of the object and regard it as the prototype on which the creation of new objects depends. Use an empty constructor to set the class name. Then all properties and methods are assigned directly to the prototype attribute.

Copy code The 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);// There are two problems with output true here:

1. The constructor has no parameters. When using prototypes, you cannot initialize property values ​​by passing parameters to function parameters.

2. When there are multiple instances, changes to the properties of one instance will affect the properties of the other instance.

Test code:

Copy code The 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 solution of this question. That is the mixed constructor/prototype method

5. Class implementation - mixed constructor/prototype method

This implementation method is shared among instances of each class Properties or methods should be implemented in the prototype chain, and properties and methods that do not need to be implemented should be implemented in the constructor. The implementation of this class is the most widely used method.

Copy code 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, 24);

oCar1.drivers.push("Matt");
alert(oCar1.drivers);
alert(oCar2.drivers ); 6. Class definition - dynamic prototype implementation

Compared with the mixed constructor/prototype method, this method provides a friendly programming style (in the mixed constructor /In the prototype method, the definition of the showColor method is implemented outside the method body, not within the method body of the constructor). There are many ways to define this class.

Copy code The 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 - Mixed Factory Implementation

Copy code The 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. Since the new operator is called inside the Car() constructor, the new operator located outside the constructor will be ignored. The object created inside the constructor is passed back to the variable var. Although it seems that there is a new operator, which is an improvement over the factory method, this implementation method also has the problem of repeated creation methods. Therefore it is not recommended to define classes in this way.