There have been too many things recently, and there is no time to continue writing. Fortunately, these two days are a little idle. First, let's take a look at the method recommended by Object-Oriented 1 in JavaScript in lower case. This article undertakes the basics of the previous JavaScript Object-Oriented Programming (1.
As mentioned in the previous article, JavaScript does not have the concept of a class, and classes must be defined through functions. Here is an example:
The Code is as follows:
Function myClass ()
{
Var id = 1;
Var name = "johnson ";
// Properties
This. ID = id;
This. Name = name;
// Method
This. showMessage = function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
}
}
Var obj1 = new myClass ();
Var obj2 = new myClass ();
The function definition is actually equivalent to the class constructor. The last two sentences are to create the class instance. First, analyze the first sentence: var obj1 = new myClass (); when using new to create a class instance, the interpreter first creates an empty object. Then run the myClass function and point this pointer to the instance of this class. When this. ID = id; and this. name = name; and this. showMessage = function (){...} the two attributes and the method will be created, and the definition of the variable id and name value level-1 function will be assigned to these two attributes and the function object (shwoMessage ). This process is equivalent to initializing this object, similar to the constructor in C. The new object is returned. Let's look at the second sentence: var obj2 = new myClass (); the execution process is the same as the previous code, that is, creating an empty object, then executing the myClass function, defining two attributes and a method.
From the above analysis, we can see that the above implementation class method defines the class attribute method in the function definition. There are drawbacks. If you need to create two or more instances of this class, the above two attributes will be repeatedly created multiple times.
So how can we avoid this situation? Prototype is also mentioned in the previous article. Prototype is the same as its name. Every function has a sub-object prototype, which actually represents a set of members of this function object. Because we use function to implement the class, so prototype is actually a collection of class members. The properties and methods defined by prototype are executed before the constructor of the function is executed. Therefore, before a new object is executed, prototype members have already been executed. Let's take a look at an example:
The Code is as follows:
Function myClass ()
{
// Constructor
}
MyClass. prototype =
{
ID: 1,
Name: "johnson ",
ShowMessage: function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
}
}
Var obj1 = new myClass ();
Var obj2 = new myClass ();
The class structure is the same as the previous example, but prototype is used here. Let's take a look at the last two sentences. As mentioned above, prototype is executed before the function constructor, that is, before var obj1 = new myClass ();, this class already has an ID, name attribute and showMessage method. The execution process is as follows. Note that, compared with the previous example, you should first create an empty object and point this pointer to this object. Then, all the members of the prototype object of the function are assigned to this object (note that these members are not created again ). Then execute the function body. The new object is returned. When executing the next statement: this process is also executed and the members are not created again.
The above code is just an example. In actual projects, there may be a large number of Members in the class, and a large number of instances may need to be created. This is prototype, and it will show its superiority. In addition, the above Code uses the braces syntax to define prototype members, which makes the code clearer. This is a recommended design model for classes. Of course, among many projects, we may also find better patterns. We also hope to have more optimized JavaScript programming patterns to be constantly updated, and we also hope that over time, mainstream browsers also have standard and unified JavaScript parsing.
As mentioned above, the prototype defined member occurs before the constructor. In the above example, the constructor is empty and an alert (this. name);. When var obj1 = new myClass (); is executed, a dialog box is displayed, showing the correct attribute values.
After writing this section, I learned a lot from my comments from many of them. The above example is further discussed as follows:
The Code is as follows:
Function subClass (){}
SubClass. prototype =
{
Name: "sub"
}
Function myClass ()
{
// Constructor
}
MyClass. prototype =
{
ID: 1,
Name: "johnson ",
SubObj: new subClass (),
ShowMessage: function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name + "SubObj. Name:" + this. SubObj. Name );
}
}
Var obj1 = new myClass ();
Obj1.SubObj. Name = "XXX ";
Obj1.showMessage ();
Var obj2 = new myClass ();
Obj2.showMessage ();
Here, a reference type is defined in myClass, which is a custom subClass class. This subClass has a Name attribute. Because prototype objects are shared, according to the above analysis: When var obj1 = new myClass (); is executed, members of prototype of myClass are copied to this obj1 instance. SubObj is a reference type. When var obj2 = new myClass (); is executed, the ID and Name members in prototype are copied to obj2, but SubObj is not copied, the SubObj in prototype is referenced, so the previous sentence modifies obj1.Subobj. the value of Name. Therefore, the modified value is referenced when the obj2 instance is generated using new.
Therefore, when prototype is used to define a class, you still need to define the attribute in the constructor, and define the method in the prototype of the constructor. As follows:
The Code is as follows:
Function myClass (id, name)
{
This. ID = id;
This. Name = name;
}
MyClass. prototype =
{
ShowMessage: function ()
{
Alert ("ID:" + this. ID + ", Name:" + this. Name );
},
ShowMessage2: function ()
{
Alert ("Method2 ");
}
}
Var obj1 = new myClass (1, "johnson ");
Obj1.showMessage ();
Obj1.Name = "John ";
Obj1.showMessage ();
Var obj2 = new myClass (2, "Amanda ");
Obj2.showMessage ();
For private members, common members, static members, class inheritance, abstract classes, virtual methods, reflection of classes, and other implementation methods, we will continue to write them later. However, I think it is worth mentioning that I plan to write the basic implementation of JavaScript object-oriented. If you need to learn more, refer to Li Zhan's "ganlu model ".
