Because of talents, I had to extract some of the content from the Javascript Advanced Program, which was also my reading notes. Because of the Javascript object-oriented mechanism and its importance, and the content is very numerous, here on the chapter by section.
The object of use is to declare it first (the built-in object is certainly not needed). Damn Javascript always lets us die a lot of brain cells, this article explains several ways to declare Javascript classes.
Factory mode
The factory pattern may be a pattern used by many developers, simply by defining the "foundation" and then throwing (binding) various features and properties onto it. The following code may look very familiar:
Copy Code code as follows:
var ocar = new Object;
Ocar.color = "Red";
Ocar.showcolor = function () {
alert (This.color);
}
Ocar.showcolor ();
Of course, since packaging into a class, it is necessary to reuse it (the above method is syntactically just a variable). It can be encapsulated using a factory function (factory function) that returns a specific object:
Copy Code code 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, there are some parameters that you can add to the Createcar function, so it looks very professional:
Copy Code code 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 are always very sophisticated, but sometimes they confuse you. If you do not consider space, you can define it externally:
Copy Code code 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 ();
Another benefit of doing this is that you don't have to repeat the definition of ocar.showcolor (an efficient program everyone likes).
constructor Pattern
Constructors are actually about the same as the factory approach. In terms of code, it is omitted that no object was created inside the constructor.
Copy Code code as follows:
function car (scolor) {
This.color = Scolor;
This.showcolor = function () {
alert (This.color);
}
}
Ocar = new Car ("Red");
Ocar.showcolor ();
In fact, this implied object has been instantiated since new. By default, the constructor returns the value of this (so you do not have to use return returns). However, the constructor pattern and the factory pattern may duplicate the definition of the method, which can be avoided by reference to the above factory pattern (it always looks imperfect).
prototype mode
Have been fed up with the problem of repeated definitions, is there a perfect solution? Of course. The use of prototyping methods can effectively avoid this type of problem.
Copy Code code as follows:
function car () {}
Car.prototype.color = new Array ("Red", "green", "blue");
Car.prototype.showColor = function () {
alert (This.color);
}
Ocar = new car ();
Ocar.showcolor ();
However, using this pattern requires that all of the properties and methods in the class are shared (in fact, pointers). This means that although the two variables that are instantiated, if one of the values is changed, the other is also changed.
Note: This section is subject to change, please see here and here (thanks to the Fish brothers).
Blending Mode
Looks more and more perfect, combined with the above learned method is easy to solve the problem of prototype mode, so that looks more like a professional programmer.
Copy Code code as follows:
function car (scolor) {
This.color = Scolor;
}
Car.prototype.showColor = function () {
alert (This.color);
}
Ocar = new Car ("Red");
Ocar.showcolor ();
The above method declares the class, the Showcolor method is a prototype (only one instance is created), and the other is constructed (non-interference).
Dynamic Prototyping Mode
It's not always a very green thing to keep your own way out, and the following approach is very "greener":
Copy Code code 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 is consistent with the above mixed-mode effect, that is, the property is defined within the constructor, and the method uses the prototype pattern. The only difference is where the object method is given.
Mixed Factory mode
The mixed-factory pattern can be thought of as a consolidation of the construction pattern and the blending mode, because the function itself is an object, so you can instantiate it using new (let me describe it this way).
Copy Code code 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 that you avoid using this method definition because, as in the factory pattern above, it has a recurring problem.
What mode is selected?
In fact, through the above description has been a result, usually using mixed mode and dynamic prototype mode (I personally cast the dynamic prototype mode one vote). However, do not use the factory model and the construction pattern (or the combination of the two) alone, as this can cause unnecessary waste.
Test code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" en "xml:lang=" en "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Declare a Javascript small class play </title> <script type=" Text/javascript ">//<! [cdata[/* var ocar = new Object; Ocar.color = "Red"; Ocar.showcolor = function () {alert (this.color); } ocar.showcolor (); */* Function Createcar () {var ocar = new Object; Ocar.color = "Red"; Ocar.showcolor = function () {alert (this.color); return ocar; } Ocar = Createcar (); Ocar.showcolor (); */* Function car (scolor) {this.color = Scolor; This.showcolor = function () {alert (this.color); } Ocar = new car ("Red"); Ocar.showcolor (); */* Function car () {} Car.prototype.color = "Red"; Car.prototype.showColor = function () {alert (this.color); } Ocar = new CAR ("red"); Ocar.showcolor (); */* Function car (scolor) {this.color = Scolor; } Car.prototype.showColor = function () {alert (this.color); } Ocar = new car ("Red"); Ocar.showcolor (); */* 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 (); */* Function car () {var ocar = new Object; Ocar.color = "Red"; Ocar.showcolor = function () {alert (this.color); return ocar; } Ocar = new car (); Ocar.showcolor (); *///]]> </script> </pead> <body></body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
