JS object-oriented 2

Source: Internet
Author: User

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:

  1. <Span style = "font-size: Medium">
  2. FunctionPerson (name, sex ){
  3. This. Name = Name;
  4. This. Sex = sex;
  5. }
  6. VaRPer =NewPerson ("sdcyst", "male ");
  7. 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:

  1. <Span style = "font-size: Medium">
  2. FunctionPerson (name, sex) {// Constructor
  3. This. Name = Name;
  4. This. Sex = sex;
  5. }
  6. Person. Prototype. Age = 12; // assign a value to the attribute of the prototype object corresponding to the prototype attribute
  7. Person. Prototype. Print =Function() {// Add Method
  8. Alert (This. Name + "_" +This. Sex + "_" +This. Age );
  9. };
  10. VaRP1 =NewPerson ("name1", "male ");
  11. VaRP2 =NewPerson ("name2", "male ");
  12. P1.print (); // name1_male_12
  13. P2.print (); // name2_male_12
  14. Person. Prototype. Age = 18; // change the attribute value of the prototype object. Note that the prototype attribute of the constructor is used.
  15. P1.print (); // name1_male_18
  16. 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:

  17. <Span style = "font-size: Medium">FunctionThe constructor of the person (name, sex) {// person class
  18. This. Name = Name;
  19. This. Sex = sex;
  20. }
  21. Person. Prototype. Age = 12; // assign a value to the attribute of the prototype object corresponding to the prototype attribute of the person class,
  22. // Equivalent to adding an attribute to the parent class of the person class
  23. Person. Prototype. Print =Function() {// Add method for the parent class of the person class
  24. Alert (This. Name + "_" +This. Sex + "_" +This. Age );
  25. };
  26. VaRP1 =NewPerson ("name1", "male"); // The age attribute of P1 inherits the parent class (prototype object) of the Child person class)
  27. VaRP2 =NewPerson ("name2", "male ");
  28. P1.print (); // name1_male_12
  29. P2.print (); // name2_male_12
  30. P1.age = 34; // change the age attribute of the P1 instance
  31. P1.print (); // name1_male_34
  32. P2.print (); // name2_male_12
  33. Person. Prototype. Age = 22; // change the age attribute of the person class's superclass.
  34. P1.print (); // name1_male_34 (the age attribute of P1 has not changed with the prototype attribute)
  35. P2.print (); // name2_male_22 (the age attribute of P2 has changed)
  36. P1.print =Function() {// Change the print method of the P1 object
  37. Alert ("I am p1 ");
  38. }
  39. P1.print (); // I am p1 (the P1 method has changed)
  40. P2.print (); // name2_male_22 (the P2 method has not changed)
  41. Person. Prototype. Print =Function() {// Change the print method of the person superclass
  42. Alert ("new print method! ");
  43. }
  44. P1.print (); // I am p1 (the print method of P1 is still its own method)
  45. P2.print (); // new print method! (The print method of P2 changes with the change of the superclass) </span>

 

 

 

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.