Basic of javascript object-oriented technology (V)

I have read many introductionsJavascriptThe article on object-oriented technology is dizzy. Why? It's not because it's not well written, but because it's too esoteric. The objects in javascript haven't clearly explained what's going on. As soon as they come up, they go straight to the topic, class/Inheritance/prototype/private variable. As a result, after reading it for a long time, I had a rough understanding and had a good aftertaste. It seems that I did not understand anything.

This article is written in chapter 7, 8 and 9 of <javascript-the definitive guide, 5th edition>, I will try to describe the javascript object-oriented technology (Object/array-> function --> class/constructor/prototype) according to the structure of the original book ). I will attach the original English statement for your reference.

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
The parameter indicates the parameter when the object calls this method. 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:

 
 

  
  
Function Person (name, age) {// define a method
  
  
This. name = name;
  
  
This. age = age;
  
  
}
  
  
Var o = new Object (); // empty Object
  
  
Alert (o. name + "_" + o. age); // undefined_undefined
  
  
Person. call (o, "sdcyst", 18); // call: o. Person ("sdcyst", 18)
  
  
Alert (o. name + "_" + o. age); // sdcyst_18
  
  
Person. apply (o, ["name", 89]); // The apply method is used in the same way as the call method. The difference is that the input parameters are transmitted using arrays.
  
  
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

 
 

  
  
Person. counter = 0; // defines the class variable, the number of Person instances created
  
  
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 persons
  
  
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 have defined a Circle class, which has a radius attribute and the area method. The implementation is as follows:

Js Code:

 
 

  
  
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, apart from the radius attribute, the area Method of each Circle class instance object is the same. In this way, we can extract the area Method and define it in the prototype attribute of the Circle class, in this way, all instance objects can call this method to save space.

Js Code

 
 

  
  
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 sub-class PositionCircle.

Js Code
 

 
 

  
  
Function Circle (radius) {// defines the parent class Circle
  
  
This. radius = radius;
  
  
}
  
  
Circle. prototype. area = function () {// defines the method of the parent class. area: calculates the area.
  
  
Return this. radius * this. radius * 3.14;
  
  
}
  
  
Function PositionCircle (x, y, radius) {// defines the class PositionCircle
  
  
This. x = x; // The x coordinate of the attribute.
  
  
This. y = y; // attribute ordinate
  
  
Circle. call (this, radius); // call the method of the parent class, which is equivalent to calling this. Circle (radius) and setting
  
  
// Radius attributes
  
  
}
  
  
PositionCircle. prototype = new Circle (); // you can specify the parent class of PositionCircle as the Circle class.
  
  
Var pc = new PositionCircle (1, 2, 1 );
  
  
Alert (pc. area (); // 3.14
  
  
// The area Method of the PositionCircle class inherits from the Circle class, while the area method of the Circle class
  
  
// The area Method inherits the prototype object corresponding to its prototype attribute.
  
  
Alert (pc. radius); // The radius attribute of the PositionCircle class inherits from the Circle class.
  
  
/* Note: we set the prototype attribute of the PositionCircle class to point to a Circle object. Therefore, the prototype attribute of the pc inherits the prototype attribute of the Circle object, the constructor attribute of the Circle object (that is, the constructor attribute of the prototype object corresponding to the Circle object) is directed to the Circle object.
  
  
Is Circ.
  
  
*/
  
  
Alert (pc. constructor); // Circle
  
  
/* 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.
  
  
Constructor attribute
  
  
*/
  
  
PositionCircle. prototype. constructor = PositionCircle
  
  
Alert (pc. constructor); // PositionCircle