JavaScript object-oriented experience [Summary]_javascript skills

It is a bit far-fetched to talk about the object-oriented design of JavaScript. After all, the JavaScript language itself is not as rigorous as a high-level language. Before reading this article, I hope you understand high-level languages ​​such as c, java, c#, etc., and have basic knowledge of object-oriented programming.
1. Class definition:
function ClassName(){
}
You can find that the definition form of a class is the same as that of a function.
In fact, functions and classes can only be distinguished when they are used. For example, we use them separately in a page:



2. Members of the class:
function ClassName( ){
//Define public variables
this.property1=0;
//Define public methods
this.method1=function(){
//Determine whether this.a is assigned a value
if(this.a != undefined)
alert(this.a);
}

//Another method definition form
this.method3=funcA;

//Define private members
var pram1=1;
var method2=function(){
alert('');
}
}
// funcA is the processing function of method method3
function funcA(){
alert('');
}
Let me explain the above code slowly:
Anything starting with this Members of the class, and they are all public.
For example: property1 is a property of the class, method1 is a method of the class;
Members of the class do not need to be defined with var, and those without the this prefix are private variables.
For example: pram1 is a private variable, method2 is a private method;
The attributes of the class do not need to be defined in the class, and the attributes that do not need to be initialized do not need to be defined, and can still be called in other places;
For example: in method1 To output the a attribute, there is no a attribute defined in the entire class. We can assign a value to it when creating the object.
var obj=new ClassName()
obj.a="hello javascript";
obj.method1();
The method of the class can be defined through this.method=function(){} , such as the method1 method;
can also be defined through this.method=funcName, and the method is designated to be processed by a certain function, such as method3;

3. Class inheritance:
function classA( ){
this.property1='hello';
this.method1=function (){
alert(this.property1);
}
}

function classB (){
}
//Inherit classA
classB.prototype=new classA();

//Add PI attribute to classB
classB.prototype.PI=3.1415926;
//Add the showPI method to classB
classB.prototype.showPI=function(){
alert(this.PI);
}
By using the prototype object, add the instance of classA Assign to the prototype object, so classB inherits all members of classA;
For example: classB.prototype=new classA();
At the same time, you can also add new members to the class outside the class through prototype (this is another advanced Functions not available in the language);
For example: classB.prototype.PI and classB.prototype.showPI

4. Overloading of class methods:
Overloading of class methods is in the constructor of the class It is often used in, for example: there are two methods with the same name in a class but different parameters or different parameter types. JavaScript does not formally support class method overloading. We can overload class methods through its arguments attribute:
function classA(){
//Get the number of parameters
// Note that this.arguments.length is wrong
var num=classA.arguments.length;

this.method1=function(){
if(num==0){
alert (0);
}
if(num==1){
alert(1);
}
}
}
The arguments attribute of the class or function name returns An array contains all parameters;
For example: classA.arguments.length can get the number of parameters, classA.arguments[0] gets the value of the first parameter
According to need, by getting the number of parameters or parameter value , so that the same function or class has different functions, such as:
var obj= new classA();
obj.method1();//outputs 0
var obj1= new classA(5 ; >function A(){
this.a=1;
this.b=2;
this.add=function(){
return this.a this.b;
}
}
//Define an object
var obj=new A();
//Assign class attributes
obj.a=5;
obj.b=6;
//Call class method
var sum=obj.add();

Another definition method:
var obj={
a:1,
b: 2.
add:function(){
return this.a this.b;
}
}

The object defined by this method also has its class structure. Defined, suitable for classes that are used only once
When defining attributes and methods, you do not need to use the this keyword, just assign the value directly after ":"
However, when using attributes in methods, you need to use the this keyword

This article is just my personal experience and understanding. I guess what I wrote is a little different from what is written in some books. I believe you will understand it quickly after reading it. This article only serves as a starting point, and specific project needs must be dealt with in detail. All examples involved have been debugged and corrected by myself. Please correct me if there are any errors.