This article takes the previous JavaScript object-oriented programming (1) Foundation.
As mentioned in the previous article, JavaScript does not have a class concept and needs to implement the definition of classes through functions. Let's take an example to illustrate:
Copy Code code 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 definition of a function actually corresponds to the constructor of the class, and the last two sentences are instances of creating this class. The first sentence is analyzed: var obj1 = new MyClass (); When you create an instance of a class with new, the interpreter first creates an empty object. Then run the MyClass function and point the this pointer to an instance of the class. When encountering the this.id = ID; name = name; and this.showmessage = function () {...} , the two properties are created, and this method is assigned to both properties and to the function object (shwomessage) by the definition of the first-level function of the value of the variable id,name. This process is equivalent to initializing this object, similar to a constructor in C #. The last new returns this object. Then look at the second sentence: var obj2 = new MyClass (); The execution process is the same as the previous code, which creates an empty object and then executes the MyClass function, defining two properties and one method.
As you can see from the analysis above, the way to implement the class above is to define the property method of the class in the definition of the function. There is a drawback. If you need to create two or more instances of this class, there are two above, and these properties are repeatedly created multiple times.
So how do you avoid this? Prototype was also mentioned in the previous article. Prototype and its name is a prototype, each function has a child object prototype, it actually represents the set of members of this function object, because we use function to implement the class, So it can be said that prototype is actually a collection of members of the class. Prototype the properties and methods defined are executed before the constructor of the function is executed, so the member of the prototype is already executed before the new object. Let's look at one example:
Copy Code code as follows:
function MyClass ()
{
Constructors
}
Myclass.prototype =
{
Id:1,
Name: "Johnson",
Showmessage:function ()
{
Alert ("ID: + this.id +", Name: "+ this.") Name);
}
}
var obj1 = new MyClass ();
var obj2 = new MyClass ();
The structure of the class is still the same as the previous example, except that it is implemented using the prototype. Let's look at the last two sentences, as I said before, the prototype is executed before the function constructor, that is, to the var obj1 = new MyClass (), before this class already has the Id,name property and the ShowMessage method. The performer's sentence is performed as follows, noting the comparison with the previous example: First, create an empty object and point the this pointer at the object. All members of the prototype object of the function are then assigned to the object (note that the members are not created again). The function body is then executed. The last new returns this object. When executing the next sentence: The same procedure is performed, and these members are not created repeatedly.
The above code is just an example, in the actual project, may appear is the class has a large number of members, and may need to create a large number of instances. This is prototype will show its superiority. In addition, the braces syntax is used in the above code to define the members of the prototype, so that the code looks clearer. This is a design pattern for a more recommended class. Of course, in a number of projects, may also find a better model, we also want to have a more optimized JavaScript programming model continues to evolve, but also hope that over time, the mainstream browser also to the interpretation of JavaScript standards, unified.
It has been said that the member of the prototype definition occurs before the constructor, and it can be proved that in the above example the constructor is empty and an alert (this) is added to the constructor. Name), and when you execute to var obj1 = new MyClass (), you see a pop-up dialog box showing the correct property values.
After writing this paragraph, thanks many for the brother's comments, the Harvest bandits shallow. For the above example further discussion, the following code:
Copy Code code as follows:
function subclass () {}
Subclass.prototype =
{
Name: "Sub"
}
function MyClass ()
{
Constructors
}
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 we define a reference type in MyClass, whose type is a subclass class that we customize, which has a name attribute. Because the prototype object is shared, as we analyzed above: when the var obj1 = new MyClass () is executed, the members of the MyClass prototype are copied to the Obj1 instance. But here subobj is a reference type that, when executed to the var obj2 = new MyClass (), the ID,NAME members in the prototype are copied to the Obj2, but subobj this property does not replicate the past. Instead, it quotes the subobj in the prototype, so because the previous sentence changed the obj1. Subobj.name value, so when the Obj2 instance is generated with new, it is referenced to the modified value.
So when you borrow prototype to define a class, you still need to define the attribute in the constructor, and define the method on the stereotype of the constructor. As follows:
Copy Code code 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 ();
The implementation of private members, shared members, and static members, class inheritance, abstract classes, virtual methods, class reflection, and so on, will continue to be written. However, I think it is necessary to say that I intend to write the JavaScript object-oriented implementation, if the need for in-depth learning suggestions reference Li Shi old brother's "mannose model."
