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:
- <Span style = "font-size: Medium">
- FunctionPerson (name, sex ){
- This. Name = Name;
- This. Sex = sex;
- }
- VaRPer =NewPerson ("sdcyst", "male ");
- Alert ("name:" + per. Name + "_ sex:" + per. Sex); // name: sdcyst_sex: male </span>
The following describes the procedure:
A function (not a method, but a common function) is created. Note that this keyword is used. previously we mentioned this keyword to indicate the object that calls this method, that is, when you call a "method" through an object, this keyword will point to this object (this points to the entire script domain, or the domain where the function is located if the function is directly called without the object, and we will not discuss it in detail here ). when we use the new operator, JavaScript will first create an empty object, and then this object is referenced by the this keyword of the method (function) next to New! Then, through this operation in the method, the newly created object is Assigned attributes. finally, the processed object is returned. in this case, the above example is clear: first create an empty object, then call the person method to assign values to it, and finally return the object, 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 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:
- <Span style = "font-size: Medium">
- FunctionPerson (name, sex) {// Constructor
- This. Name = Name;
- This. Sex = sex;
- }
- Person. Prototype. Age = 12; // assign a value to the attribute of the prototype object corresponding to the prototype attribute
- Person. Prototype. Print =Function() {// Add Method
- Alert (This. Name + "_" +This. Sex + "_" +This. Age );
- };
- VaRP1 =NewPerson ("name1", "male ");
- VaRP2 =NewPerson ("name2", "male ");
- P1.print (); // name1_male_12
- P2.print (); // name2_male_12
- Person. Prototype. Age = 18; // change the attribute value of the prototype object. Note that the prototype attribute of the constructor is used.
- P1.print (); // name1_male_18
- P2.print (); // name2_male_18 </span>
So far, we have simulated the implementation of simple classes. We have constructors, class attributes, and class methods to create "instances ".
In the following article, 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:
- <Span style = "font-size: Medium">FunctionThe constructor of the person (name, sex) {// person class
- This. Name = Name;
- This. Sex = sex;
- }
- Person. Prototype. Age = 12; // assign a value to the attribute of the prototype object corresponding to the prototype attribute of the person class,
- // Equivalent to adding an attribute to the parent class of the person class
- Person. Prototype. Print =Function() {// Add method for the parent class of the person class
- Alert (This. Name + "_" +This. Sex + "_" +This. Age );
- };
- VaRP1 =NewPerson ("name1", "male"); // The age attribute of P1 inherits the parent class (prototype object) of the Child person class)
- VaRP2 =NewPerson ("name2", "male ");
- P1.print (); // name1_male_12
- P2.print (); // name2_male_12
- P1.age = 34; // change the age attribute of the P1 instance
- P1.print (); // name1_male_34
- P2.print (); // name2_male_12
- Person. Prototype. Age = 22; // change the age attribute of the person class's superclass.
- P1.print (); // name1_male_34 (the age attribute of P1 has not changed with the prototype attribute)
- P2.print (); // name2_male_22 (the age attribute of P2 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. Prototype. 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) </span>