Basic of JavaScript object-oriented technology (V)

 

Class variables/class methods/instance variables/instance methods
First, add the methods that have been previously written:
In JavaScript, all methods have a call method and an apply method. These two methods can simulate the object call method. The first parameter of the method is the object, followed
Parameter indicates the parameter when the object calls this method (ecmascript specifies two methods that are defined for all functions, call ()
And apply (). These methods allow you to invoke a function as if it were a method of some other object. The first
Argument to both call () and apply () is the object on which the function is to be invoked; this argument becomes
The value of the this keyword within the body of the function. Any remaining arguments to call () are the values
That are passed to the function that is invoked). For example, we define a method F () and then call the following statement:
F. Call (O, 1, 2 );
The function is equivalent
O. M = F;
O. m (1, 2 );
Delete o. m;
For example:

 

JS Code

2. FunctionPerson (name, age ){// Define the Method
4. This. Name = Name;
6. This. Age = age;
8. }
10. VaRO =NewObject ();// Empty object
12. Alert (O. Name +"_"+ O. Age );// Undefined_undefined
16. Person. Call (O,"Sdcyst", 18 );// Call: O. person ("sdcyst", 18)
18. Alert (O. Name +"_"+ O. Age );// Sdcyst_18
22. Person. Apply (O ,["Name", 89]);// The apply method is used in the same way as the call method. The difference is that the parameters are transmitted using arrays.
24. Alert (O. Name +"_"+ O. Age );// Name_89

 

Function person (name, age) {// defines the method this. name = Name; this. age = age;} var o = new object (); // empty object alert (O. name + "_" + O. age); // undefined_undefinedperson.call (O, "sdcyst", 18); // call: O. person ("sdcyst", 18) Alert (O. name + "_" + O. age); // sdcyst_18person.apply (O, ["name", 89]); // The apply method works the same as call, the difference is that the form of passing parameters is to use arrays to pass alert (O. name + "_" + O. age); // name_89
 

---------------------------------

Both instance variables and instance methods are accessed by adding the "." operator to the Instance Object and following the attribute name or method name. However, you can also set methods or variables for classes,
In this way, you can directly use the class name plus "." operator and then follow the property name or method name to access. Defining class attributes and class methods is very simple:

 

JS Code

2. Person. Counter = 0;// Define the class variable and the number of person instances created
4. FunctionPerson (name, age ){
6. This. Name = Name;
8. This. Age = age;
10. Person. Counter ++;// No instance is created, class variable counter plus 1
12. };
16. Person. whoisolder =Function(P1, P2 ){// Class method to determine who is older
18. If(P1.age> p2.age ){
20. ReturnP1;
22. }Else{
24. ReturnP2;
26. }
28. }
32. VaRP1 =NewPerson ("P1", 18 );
34. VaRP2 =NewPerson ("P2", 22 );
38. Alert ("Now"+ Person. Counter +"Individual");// There are two people now
40. VaRP = person. whoisolder (P1, P2 );
42. Alert (P. Name +"Older");// P2 is older

 

Person. counter = 0; // defines the class variable. The number of created person instances function person (name, age) {This. name = Name; this. age = age; person. counter ++; // no instance is created, class variable counter plus 1}; person. whoisolder = function (P1, P2) {// class method to determine who is older if (p1.age> p2.age) {return P1 ;}else {return P2 ;}} vaR p1 = new person ("p1", 18); var P2 = new person ("p2", 22); alert ("now" + person. counter + "individual"); // now there are two individuals var P = person. whoisolder (P1, P2); alert (P. name + "older"); // P2 older
 

 

Application of the prototype attribute:
The following example is based on the original book.
Suppose we define a circle class, which has a radius attribute and an area method. The implementation is as follows:

 

JS Code

2. FunctionCircle (RADIUS ){
4. This. Radius = radius;
6. This. Area =Function(){
8. Return3.14 *This. Radius *This. Radius;
10. }
12. }
14. VaRC =NewCircle (1 );
16. Alert (C. Area ());// 3.14

 

Function circle (RADIUS) {This. radius = radius; this. area = function () {return 3.14 * This. radius * This. radius ;}} var c = new circle (1); alert (C. area (); // 3.14.
 

Suppose we have defined 100 circle class instance objects, then each instance object has a radius attribute and area method,
In fact, except for the radius attribute, the Area Method of each circle class instance object is the same. In this way, we can
Define the Area Method in the prototype attribute of the circle class so that all instance objects can call this method,
This saves space.

 

JS Code

2. FunctionCircle (RADIUS ){
4. This. Radius = radius;
6. }
8. Circle. Prototype. Area =Function(){
10. Return3.14 *This. Radius *This. Radius;
12. }
14. VaRC =NewCircle (1 );
16. Alert (C. Area ());// 3.14

 

 
Function circle (RADIUS) {This. radius = radius;} circle. prototype. area = function () {return 3.14 * This. radius * This. radius;} var c = new circle (1); alert (C. area (); // 3.14.
 

 

Now, let's use the prototype attribute to simulate class inheritance: first define a circle class as the parent class, and then define the subclass
Positioncircle.

 

JS Code

2. FunctionCircle (RADIUS ){// Define the parent class circle
4. This. Radius = radius;
6. }
8. Circle. Prototype. Area =Function(){// Define the parent class method area to calculate the area
10. Return This. Radius *This. Radius * 3.14;
12. }
16. FunctionPositioncircle (X, Y, radius ){// Define the class positioncircle
18. This. X = X;// Horizontal coordinate of the attribute
20. This. Y = y;// Attribute ordinate
22. Circle. Call (This, Radius );// Call the method of the parent class, which is equivalent to calling this. Circle (RADIUS) and setting the positioncircle class
24. // RADIUS attributes
26. }
28. Positioncircle. Prototype =NewCircle ();// Set positioncircle's parent class to circle class
32. VaRPC =NewPositioncircle (1, 2 );
34. Alert (PC. Area ());// 3.14
36. // The Area Method of the positioncircle class inherits from the circle class, while the area method of the circle class
38. // The Area Method inherits the prototype object corresponding to its prototype attribute.
40. Alert (PC. radius );// 1 the radius attribute of the positioncircle class inherits from the circle class
44. /* 
46. Note: Previously we set the prototype attribute of the positioncircle class to point to a circle object, 
48. Therefore, the prototype attribute of PC inherits the prototype attribute of the circle object, while the constructor of the circle object belongs 
50. (That is, the constructor attribute of the prototype object corresponding to the Circle object) is directed to the circle. 
52. Is CIRC. 
54. */
56. Alert (PC. constructor );// Circle
60. /* For this reason, after we have designed the inheritance relationship of the class, we also need to set the constructor attribute of the subclass. Otherwise, it will point to the parent class. 
62. Constructor attribute 
64. */
66. Positioncircle. Prototype. constructor = positioncircle
68. Alert (PC. constructor );// Positioncircle