JavaScript's object-oriented Properties Reference _ Basics

A reference to the object-oriented nature of JavaScript.
This is a summary of my learning about object-oriented features in JavaScript. It is helpful to understand JavaScript oo with a friend who has experience in object-oriented design in other languages. I have C++,java and Python experience in object-oriented design.
Overall feeling, JavaScript as a weak type of dynamic language, syntax solution to Java, but its object-oriented way more with Python acquaintance.
1 Object-oriented features
Classes, member variables, member functions, class variables, class methods, inheritance, polymorphism
1) class
Class definition: Function Circle (r) {THIS.R = R;}
Class Instantiation: c = Circle (3);
2) member variable
The member variable is declared in the initialization function: THIS.R = r;
Note that after the object is generated, you can also attach a member variable to it, such as c.name= "My Circle",
But I strongly recommend that you do not do this unless you have a special need. That is, all members should be declared in the initialization function. I think it's a good style.
This is known to Python.
3) member function
The standard form of a member function is this:
Cricle.prototype.area = function () {return 3.14 * THIS.R * THIS.R;}
This is very different from Java or Python or C + +. But to help understand, you can think of prototype as a base class.
The variables or methods inside the prototype are shared by all objects.
For example, the C.area () call eventually makes the interpreter call to Circle.prototype.area ().
Compared to Java and C++,javascript have a semantics that they don't have, that is, you can define variables in prototype. Variables defined in prototype can be shared by all instances. So generally it should be a constant, for example: Circle.prototype.PI = 3.14.
Obviously, the variables and methods in the prototype should be invariant. Every instance of an object should not be prototype to modify the content in the. While language allows you to do this, it does not make any sense and violates object-oriented semantics (think, Java will let you dynamically modify a class method).
Of course, for polymorphism is another thing, in detail later.
Also, I recommend that all member functions be defined immediately where the class definition is. You should not add/modify member functions to an object instance where the code is running. The result is that JavaScript's class definition tries to emulate Java. Makes the code clearer.
4) class variables
A class variable is a variable that belongs to a class. Like a variable in Java that is decorated with static. Because it belongs to a class, it should also be a constant. Instance should not modify it, although you can (in Java can use final modification, so that the class variable once defined, can not be modified).
As you can see here, the function of the variables defined in the class variables and prototype is similar. Indeed, their purpose is the same. But the way they visit
Not the same. Like what:
Circle.prototype.PI = 3.14;
Circle.pi = 3.14;
With the variables in the prototype.
CIRCLE.PROTOTYPE.AREA1 = function () {return this. PI * THIS.R * THIS.R; }
With class variables
CIRCLE.PROTOTYPE.AREA2 = function () {return CIRCLE.PI * THIS.R * THIS.R;}
5) class method
This concept should be very simple. Note class methods should never use the This keyword, and Java is exactly the same.
Circle.max = function (A, b) {return A.R > B.R? a:b;}
Themax = Circle (new Circle (1), New Circle (4));
6) Inheritance
Subclass inherits the parent class, the subclass instance has exactly the same behavior as the parent class instance. That's how JavaScript is implemented.
function subcircle (x, Y, r) {this.x = x; this.y = y; this.r =r;}
Subcircle.prototype = new Circle (0);
Remember what you said earlier? You can think of prototype as a base class. Here, prototype is indeed a base class. How is it achieved?
Examples are as follows: sc = Subcirlce (1,1,3); Sc.area ();
Delivery of the call: Sc.area ()->sc.prototype.area ()->circle (0). Area ()->circle.prototype.area (). It's not that wonderful.
In this way, JavaScript implements inheritance.
7) Polymorphism
Polymorphism is that subclasses define methods that have the same signature as the parent class. Suppose the space in the subcircle is pi=100, and the area formula becomes pi*r*r*r.
SubCircle.prototype.PI = 100
SubCircle.prototype.area = function () {return this. PI*THIS.R*THIS.R*THIS.R; }
Sc.area () Such an operation can be considered to be:
Sc.pi->sc.prototype.pi->cricle (0). PI = 100
Sc.area ()->sc.prototype.area ()->circle (0). area.
This time, the call process is like this
Sc.area ()->sc.prototype.area (), where the interpreter discovers the method of area, so it calls this method.
And Cricle.prototype.area will never be invoked. The same is true for PI calls.
So how do subclasses want to invoke the parent class? There seems to be no way oh, who knows can tell me. But the object-oriented theory tells us that inheritance is primarily about providing interfaces rather than code reuse, so it's still rare to have such a good idea:.
Here is an example program. Contains all of the above concepts.

<ptml> <pead> <script language= "JavaScript" >///////////define:cricle//////////////////function C Ircle (r) {THIS.R = R; } Circle.pi = 3.14; Circle.prototype.PI = 3.14; Circle.prototype.area = function () {return CIRCLE.PI*THIS.R*THIS.R;} CIRCLE.PROTOTYPE.AREA2 = function () {return this. PI*THIS.R*THIS.R; ////Test c = new Circle (3); Alert ("Area1:" +c.area ()); Alert ("AREA2:" +c.area2 ()); Circle.max = function (A, b) {return A.R&GT;B.R? A.R:B.R;} Alert ("Max is" +circle.max (new Circle (1), New Circle (3)); C1 = new Circle (1); C2 = new Circle (1); C2. PI = 100;//circle.prototype.pi=100; Alert ("C1.area1" +c1.area ()); Alert ("C1.area2" +c1.area2 ()); Alert ("C2.area1" +c2.area ()); Alert ("C2.area2" +c2.area2 ()); Define:subcircle//////////////////function subcircle (x, Y, r) {this.x = x; This.y = y; THIS.R = R; } Subcircle.prototype = new Circle (0); Subcircle.prototype.PI = 100; SubCircle.prototype.move2 = function (x, y) {this.x = x; This.y = y;} SubCircle.prototype.area = function () {return this. PI*THIS.R*THIS.R*THIS.R; }////Test sc = new subcircle (0,0,2); Alert (Sc.area ()); </script> </pead> <body> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]