Javascript object-oriented (statement)_js object-oriented

Due to my limited knowledge and limited knowledge, I had to excerpt some of the content from "Javascript Advanced Programming". These can also be regarded as my reading notes. Since the object-oriented mechanism of Javascript is extremely important and the content is very extensive, I will introduce it one by one here in chapters.

To use an object, you first need to declare it (of course not required for built-in objects). Damn Javascript always makes us die a lot of brain cells. This article mainly explains several methods of declaring Javascript classes.

Factory mode
Factory mode may be a mode used by many developers. Simply put, this method first defines the "foundation" and then throws it on top (binding ) various functions and properties. The following code may look very familiar:

Copy code The code is as follows:

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

Of course, since it is packaged into a class, it must be reused (the above method is syntactically just a variable). It can be encapsulated using a factory function that returns a specific object:

Copy code The code is as follows:

function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color) ;
}

return oCar;
}
oCar = createCar();
oCar.showColor();

Of course, change it, You can add some parameters to the createCar function, which looks very professional:

Copy code The code is as follows:

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color) ;
}

return oCar;
}
oCar = createCar();
oCar.showColor();

Anonymous functions always let People feel very profound, but sometimes they also confuse themselves. If the length is not considered, you can define it externally:

Copy code The code is as follows:

function showColor () {
alert(this.color);
}

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;

return oCar;
}
oCar = createCar();
oCar.showColor();

Also do this One advantage is that there is no need to define oCar.showColor repeatedly (everyone likes efficient programs).

Constructor pattern
The constructor is actually similar to the factory method. In terms of code volume, it means that an object is not created inside the constructor.

Copy code The code is as follows:

function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar. showColor();

In fact, this implicit object has been instantiated after new. By default, the constructor returns the value of its this (so there is no need to use return). However, the constructor pattern, like the factory pattern, may repeatedly define methods. In this regard, you can refer to the above-mentioned factory pattern to avoid it (it always looks imperfect).

Prototype Mode
I have had enough of the problem of repeated definitions, so is there a perfect solution? Of course there is. Using the prototype method can effectively avoid such problems.

Copy code The code is as follows:

function Car() {}
Car.prototype .color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();

But what you need to pay attention to when using this mode is that all properties and methods in the class are shared (actually pointers). This means that although two variables are instantiated, if the value of one is changed, the other will also be changed.

Note: The content of this paragraph has changed. Please see here and here for details (thanks to Brother Fish for suggesting it).

Mixed mode
It looks more and more perfect. Combining the methods learned above, it is easy to solve the problem of prototype mode, so that it looks more like a professional program. Member.

Copy code The code is as follows:

function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();

For the class declared by the above method, the showColor method is a prototype (only one instance is created), and the others are constructors (do not interfere with each other).

Dynamic Prototyping Mode
It is not a very environmentally friendly thing to keep your own methods outside. The following method is very "green":

Copy code The code is as follows:

function Car() {
this.color = "red";
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
oCar = new Car("red");
oCar.showColor();

This method has the same effect as the above blending mode, that is Properties are defined within constructors, while methods use the prototype pattern. The only difference is where the object methods are assigned.

Mixed Factory Pattern
Mixed Factory Pattern can be considered as the integration of construction pattern and mixed pattern, because function itself is an object, so it can be instantiated using new (please allow me described in this way).

Copy code The code is as follows:

function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = new Car();
oCar.showColor();

However, it is recommended to avoid using this method definition, because like the above factory pattern, it has repeated declarations question.

Which mode to choose?
In fact, the above description has produced some results. The mixed mode and dynamic prototype mode are usually used (I personally vote for the dynamic prototype mode). However, do not use the Factory Pattern and the Construction Pattern (or a combination of the two) alone, as this will cause unnecessary waste.

Test code

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Declare a small Javascript class for fun</title>