javascript object-oriented feature reference_basic knowledge

Reference for object-oriented features of JavaScript.
This is a summary of my study of object-oriented features in JavaScript. I hope it will be helpful for friends who have experience in object-oriented design in other languages ​​to understand the OO of JavaScript. I have experience in object-oriented design in c, java and python.
The overall feeling is that JavaScript is a weakly typed dynamic language. Its syntax is similar to Java, but its object-oriented approach is more familiar to Python.
1 Object-oriented features
Classes, member variables, member functions, class variables, class methods, inheritance, polymorphism
1) Classes
Definition of class: function Circle(r) { this.r = r; }
Instantiation of class: c = Circle(3);
2) Member variables
Member variables Declare in the initialization function: this.r = r;
Note that after the object is generated, you can also attach member variables to it, such as c.name="my circle",
But unless there is a special need , I strongly advise you not to do this. That is, all members should be declared in the initialization function. I think this is a good style.
This is very familiar with python.
3) Member function
The standard form of member function is like 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 in prototype are shared by all objects.
For example, the c.area() call will eventually cause the interpreter to call Circle.prototype.area().
Compared to java and c, javascript has a semantic that neither of them has, that is, you can Define variables in prototype. Variables defined in the prototype can be shared by all instances. So generally it should be a constant, such as: Circle.prototype.PI = 3.14.
Obviously, the variables and methods in the prototype should be unchanged. Each object instance should not modify the contents of the prototype. Although the language allows you to do this, it makes no sense and violates object-oriented semantics (think about it, does Java let you dynamically modify the methods of a class).
Of course, polymorphism is another matter, which will be discussed in detail later.
Also, I recommend that all member functions be defined immediately after the class definition. Instead of adding/modifying member functions to an object instance somewhere while the code is running. The result is that the class definitions of JavaScript are as consistent as those of Java. Makes the code clearer.
4) Class variables
Class variables are variables that belong to a class. Just like variables modified with static in java. Since it belongs to the class, it should also be a constant. The instance should not modify it, although you can (you can use final modification in Java so that once the class variable is defined, it cannot be modified).
You can see here that the functions of class variables and variables defined in prototype are similar. Indeed, their purpose is the same. But their access methods are
different. For example:
Circle.prototype.PI = 3.14;
Circle.PI = 3.14;
//Use variables in prototype
Circle.prototype.area1 = function() { return this.PI * this.r * this.r; }
//Use class variables
Circle.prototype.area2 = function() { return Circle.PI * this.r * this.r; }
5) Class method
This concept should be simple. Note that never use the this keyword in class methods, it is exactly the same as in Java.
Circle.max = function(a, b) { return a.r > b.r ? a : b; }
theMax = Circle(new Circle(1), new Circle(4));
6) Inherit
The subclass inherits the parent class, then the "subclass instance" has exactly the same behavior as the "parent class instance". This is how javascript is implemented.
function SubCircle(x, y, r) { this.x = x; this.y = y; this.r =r; }
SubCircle.prototype = new Circle(0);
Remember the previous Did you say that? You can think of prototype as a base class. Here, prototype is indeed a base class. How is it achieved?
For example: sc = SubCirlce(1,1,3); sc.area();
Call transfer: sc.area()->sc.prototype.area()->Circle( 0).area()->Circle.prototype.area(). Doesn’t it look amazing?
In this way, JavaScript implements inheritance.
7) Polymorphism
Polymorphism is when a subclass defines a method with the same signature as the parent class. Assume that PI=100 in the space where SubCircle is located, and the area formula also becomes PI*R*R*R.
SubCircle.prototype.PI = 100
SubCircle.prototype.area = function() { return this.PI*this.r*this.r*this.r; }
Sc.area() like this The operation can be considered as:
Sc.PI->sc.prototype.PI->Cricle(0).PI = 100
Sc.area()->sc.prototype.area()- >Circle(0).area.
At this time, the calling process is as follows
sc.area()->sc.prototype.area(), where the interpreter discovered the area method, so It calls this method.
Cricle.prototype.area will never be called. The same goes for calls to PI.
So what should a subclass do if it wants to call the method of the parent class? There seems to be no solution. If anyone knows, can you tell me. But object-oriented theory tells us that inheritance mainly provides interfaces rather than code reuse, so it is better to have less such ideas :).
The following is an example program. Contains all the above concepts.

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]