The inheritance of classes in JavaScript can refer to Nanyi's blog, "The design idea of JavaScript inheritance mechanism", which is very well said.
First, the problems encountered in JavaScript instantiation:
Here's a description of the example in the JavaScript Advanced program, which is an instance of the object class if you now define a car. Like the following:
Copy Code code as follows:
var ocar=new Object ();
Ocar.color = "Red";
Ocar.doors = 4;
Ocar.mpg = 23;
Ocar.showcolor = function () {
alert (This.color);
};
Now you need an example that you might define like this:
Copy Code code as follows:
var oCar2 = new Object ();
Ocar2.color = "Blue";
Ocar2.doors = 5;
Ocar2.mpg = 25;
Ocar2.showcolor = function () {
alert (This.color);
};
The problem with this is that each object needs to redefine his fields and methods once. Very troublesome.
Second, the definition of class-factory way to achieve:
A wrapper over the example above, using the return value of the function to make a fuss:
Copy Code code 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 Mode:
var oCar1 = Createcar ();
var oCar2 = Createcar ();
This approach is called the factory approach. The factory approach seems to be a lot easier. At least when you create an object, you don't need as many rows. Because the value of each attribute (COLOR,DOORS,MPG) is fixed, it needs to be rebuilt again, using parameter passing to achieve:
Copy Code code 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 may seem like a true object. The implementation is also very simple, the invocation is also very convenient. But there are two places that are not very good:
1. Semantically, the new operator is not used when creating objects (typically creating an object is implemented with a new operator).
2, does not conform to the object-oriented characteristics--encapsulation. In this case, both OCAR1 and OCar2 have their own showcolor methods, and their showcolor are their own implementations. But the fact is that they share the same function.
There is also a way to solve the problem of shared functions, using function pointers to solve. Create a Showcolor function outside the Createcar function, and the Otempcar Showcolor method points to the Showcolor function:
Copy Code code 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 ();
While this solves the problem of repeating the creation of a function, it makes the Showcolor function look less like the object's method.
Third, the definition of class--constructor method implementation:
Copy Code code as follows:
function car (scolor, idoors, Impg) {
Separate properties and functions are generated for each object in the form of a constructor
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, the This pointer represents an instance of car, so no return value is required. Although the constructor implements the definition of a class, he also creates a separate method for each instance, just like the factory approach. Although you can create a function outside of a function like a factory function to use pointers to solve the problem, there is no semantic meaning in doing so.
The definition of class--the prototype way to achieve:
Take advantage of the prototype attribute of an object and think of it as the prototype on which the new object is created. Use an empty constructor to set the class name. All of the properties and methods are then given directly to the prototype attribute.
Copy Code code 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 here are two questions:
1, the constructor has no parameters. When using prototypes, you cannot initialize property values by passing arguments to function arguments.
2. When there are multiple instances, changes to the properties of one of the instances affect the properties of another instance.
Test code:
Copy Code code 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's the hybrid constructor/prototype approach
Implementation of class--hybrid constructor/prototype approach
This implementation is a way to get the properties or methods shared in each instance of the class to be implemented in the prototype chain, and the properties and methods that do not require shared implementations to be implemented in the constructor. This class is implemented in the most widely used way.
Copy Code code 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); Vi. definition of class--dynamic prototyping method implementation
This approach provides a friendly programming style compared to the mixed constructor/prototyping approach, where the definition of the Showcolor method is implemented outside of the method body, not in the constructor's method body. The definition of this kind is also used in many ways.
Copy Code code 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;
}
Definition of class--the implementation of hybrid factory approach
Copy Code code 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 approach looks similar to the factory approach. Because the new operator is called inside the car () constructor, the new operators that are outside the constructor are ignored. Objects created inside the constructor are passed back to the variable var. Although it appears that you have the new operator, there has been some improvement over the factory approach, but this implementation is also a problem with duplicate creation methods. Therefore, it is not recommended to define classes in this way.
