Basic of JavaScript object-oriented technology (IV)

Class, constructor, prototype

Note: As mentioned above, each function contains a prototype attribute that points to a prototype object (every
Function has a prototype property that refers to a predefined prototype object -- section8.6.2). Do not
Confused.

Constructor:
The new operator is used to generate a new object. New must be followed by a function, that is, the constructor we often call. What is the working principle of the constructor?
Let's take a look at an example:

JS Code

1. function person (name, sex) {
2. This . Name = Name;
3. This . Sex = sex;
4. }
5. var Per = new person ( "sdcyst" , "male" );
6. alert ( "name:" + per. name + "_ sex:" + per. sex); // name: sdcyst_sex: male

Function person (name, sex) {This. name = Name; this. sex = sex;} var per = new person ("sdcyst", "male"); alert ("name:" + per. name + "_ sex:" + per. sex); // name: sdcyst_sex: Male
 

 

The following describes the procedure:
A function (not a method, but a common function) is created. Note that the this keyword is used. We have mentioned this keyword to indicate the object that calls this method.
When a "method" is called through an object, this keyword will point to this object (if this is called directly without an object, this points to the entire script domain, or the domain where the function is located.
We will not discuss it in detail). When we use the new operator, JavaScript will first create an empty object, and then this object will be referenced by the this keyword of the method (function) after the new! Then in the Method
After this operation, attributes are assigned to the newly created object, and the processed object is returned. In this case, the preceding example is clear: Create an empty object first, and then
Call the person method to assign values to the object and return the object. Then we get a per object.

Prototype-the prototype object and prototype attribute are repeatedly mentioned here.
In JavaScript, each object has a prototype attribute that points to a prototype object.
We mentioned the process of creating an object with new. In fact, when an empty object is created, new will operate on the prototype attribute of the newly generated object.
Each method has a prototype attribute (because the method itself is also an object). The prototype attribute value of the new object generated by the new operator is consistent with that of the constructor.
The prototype property of the prototype method points to a prototype object. This prototype object has only one constructor initially, and this constructor property points to the party where the prototype property is located.
Method (in the previous section, I showed that the new operator creates a new, empty object and then invokes a constructor
Function as a method of that object. This is not the complete story, however. After creating the empty object,
New sets the prototype of that object. The prototype of an object is the value of the prototype PROPERTY OF ITS
Constructor function. All functions have a prototype property that is automatically created and initialized when
The function is defined. The initial value of the prototype property is an object with a single property. This property
Is named constructor and refers back to the constructor function with which the prototype is associated. This is why every
Object has a constructor property. Any properties you add to this prototype object will appear to be properties
Objects initialized by the constructor. ----- section9.2)
A little dizzy. See the figure below:

 

 

In this way, when a constructor is used to create a new object, it will obtain all the attributes of the prototype object pointed to by the prototype attribute of the constructor.
Any operation is reflected on the object generated by the constructor. All these objects share the properties of prototype objects (including methods) corresponding to the constructor ).
Let's take a look at the specific example:

JS Code

2. FunctionPerson (name, sex ){// Constructor
4. This. Name = Name;
6. This. Sex = sex;
8. }
10. Person. Prototype. Age = 12;// Assign a value to the attribute of the prototype object corresponding to the prototype attribute
12. Person. Prototype. Print =Function(){// Add Method
14. Alert (This. Name +"_"+This. Sex +"_"+This. Age );
16. };
20. VaRP1 =NewPerson ("Name1","Male");
22. VaRP2 =NewPerson ("Name2","Male");
24. P1.print ();// Name1_male_12
26. P2.print ();// Name2_male_12
30. Person. Prototype. Age = 18;// Change the attribute value of the prototype object. Note that it is the prototype attribute of the constructor.
32. P1.print ();// Name1_male_18
34. P2.print ();// Name2_male_18

 
Function person (name, sex) {// constructor this. name = Name; this. sex = sex;} person. prototype. age = 12; // assign the person value to the property of the prototype object corresponding to the prototype attribute. prototype. print = function () {// Add method alert (this. name + "_" + this. sex + "_" + this. age) ;}; var p1 = new person ("name1", "male"); var P2 = new person ("name2", "male"); p1.print (); // name1_male_12p2.print (); // name2_male_12person.prototype.age = 18; // change the attribute value of the prototype object. Note that the prototype attribute p1.print () of the constructor is used. // name1_male_18p2.print (); // name2_male_18
 

 

So far, we have simulated the implementation of simple classes. We have constructors, class attributes, and class methods to create "instances ".
In the followingArticleIn, we use the name "class" to replace the constructor method. However, this is just a simulation, not a real Object-Oriented "class ".
Before proceeding to the next step, let's take a look at the considerations for changing the prototype attribute of the object and setting the prototype attribute:
An improper explanation may help us understand that when we create an object, this object will obtain the prototype of the constructor.
(Including functions and variables), it can be considered that the constructor (class) inherits the functions and variables of prototype objects corresponding to its prototype attribute, that is,
The prototype object simulates the effect of a superclass. Let's look at an instance for a better interface:

JS Code

2. FunctionPerson (name, sex ){// Constructor of the person class
4. This. Name = Name;
6. This. Sex = sex;
8. }
10. Person. Prototype. Age = 12;// Assign a value to the attribute of the prototype object corresponding to the prototype attribute of the person class,
12. // Equivalent to adding an attribute to the parent class of the person class
14. Person. Prototype. Print =Function(){// Add a method for the parent class of the person class
16. Alert (This. Name +"_"+This. Sex +"_"+This. Age );
18. };
22. VaRP1 =NewPerson ("Name1","Male");// The age attribute of P1 inherits the parent class (prototype object) of the Child person class)
24. VaRP2 =NewPerson ("Name2","Male");
28. P1.print ();// Name1_male_12
30. P2.print ();// Name2_male_12
34. P1.age = 34;// Change the age attribute of the P1 instance
36. P1.print ();// Name1_male_34
38. P2.print ();// Name2_male_12
42. Person. Prototype. Age = 22;// Change the age attribute of the super class of the person class
44. P1.print ();// Name1_male_34 (the age attribute of P1 does not change with the prototype attribute)
46. P2.print ();// Name2_male_22 (P2's age attribute has changed)
50. P1.print =Function(){// Change the print method of the P1 object
52. Alert ("I am p1");
54. }
58. P1.print ();// I am p1 (the P1 method has changed)
60. P2.print ();// Name2_male_22 (the P2 method has not changed)
64. Person. Prototype. Print =Function(){// Change the print method of the person superclass
66. Alert ("New print method! ");
68. }
72. P1.print ();// I am p1 (the print method of P1 is still its own method)
74. P2.print ();// New print method! (The print method of P2 changes with the change of the superclass method)

Function person (name, sex) {// The constructor of the person class this. name = Name; this. sex = sex;} person. prototype. age = 12; // assign a value to the property of the prototype object corresponding to the prototype attribute of the person class, // equivalent to adding the property person to the parent class of the person class. prototype. print = function () {// Add method alert (this. name + "_" + this. sex + "_" + this. age) ;}; var p1 = new person ("name1", "male"); // The age attribute of P1 inherits the parent class (prototype object) of the Child person class) vaR P2 = new person ("name2", "male"); p1.print (); // name1_mal E_12p2.print (); // name2_male_12p1.age = 34; // change the age attribute p1.print () of the P1 instance; // name1_male_34p2.print (); // name2_male_12person.prototype.age = 22; // change the age attribute p1.print () of the super class of the person class; // name1_male_34 (the age attribute of P1 does not change with the prototype attribute) p2.print (); // name2_male_22 (P2's age attribute has changed) p1.print = function () {// change the print method of the P1 object alert ("I am p1");} p1.print (); // I am p1 (the P1 method has changed) p2.print (); // name2_male_22 (the P2 method has not changed) person. PR Ototype. Print = function () {// change the print method of the person superclass alert ("new print method! ");} P1.print (); // I am p1 (the print method of P1 is still its own method) p2.print (); // new print method! (The print method of P2 changes with the change of the superclass method)

 

I have read an article that describes that the prototype attribute of an object in Javascript is equivalent to the static variable in Java and can be used by all objects in this class.
Sharing. The above example seems to indicate that the actual situation is not like this:
In JS, when we create an instance object of a class using the new operator, its methods and attributes actually inherit the prototype attribute of the class, and the prototype attribute of the class.
The methods and attributes defined in can indeed be directly referenced by these instance objects. However, when we re-assign or define the attributes and methods of these instance objects
The attributes or methods of the Instance Object no longer point to the attributes and methods defined in the prototype attribute of the class. At this time, even if the corresponding methods or
Attributes are modified and will not be reflected in the instance object. This explains the example above:
In the beginning, two objects P1 and P2 are generated using the new operator. Their age attributes and print methods both come from the prototype attribute of the (inherited from) person class. Then, we
After the age attribute of P1 is modified, the age attribute of P1 is not assigned again (person. Prototype. Age = 22) in the prototype attribute of the person class.
The age attribute of P2 is changed, because the age attribute of P2 is still derived from the prototype attribute of the person class.
The print method is also reflected.

Through the above introduction, we know that the prototype attribute simulates the role of the parent class (superclass) in Javascript, and reflects the object-oriented idea in JS. The prototype attribute
Is critical.