Object-oriented in Javascript-class

I. Opening

(Part of the following text is from the content of the compiled books, and part of the text is from the experience)
Javascript is an object-oriented language. Javascript objects include local objects, built-in objects, and custom objects.

Both the local object and the built-in object are independently implemented by ecmascript on the host. The local object and built-in object mentioned here are actually similar to the class concept in. net. The difference between a local object and a built-in object is that a local object needs to be instantiated during use, while a built-in object is like a so-called static class and can be directly used.

Local objects in JS include: Object Function Array string Boolean number date Regexp

Internal objects include global and math.

The following describes five methods of user-defined classes:

Ii. Customize classes in Javascript

1. Factory method

Function createcar (){
VaR otempcar = new object ();
Otempcar. color = "red ";
Otempcar. Doors = 4;
Otempcar. mpg = 23;
Otempcar. showcolor = function (){
Alert (this. Color );
}
Return otempcar;
}

VaR ocar1 = createcar ();
Ocar1.showcolor ();

Disadvantages: There are many disadvantages, which are basically not used

2. constructor Method

Function car (scolor, idoors, impg ){
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
This. showcolor = function (){
Alert (this. Color );
}
}

VaR ocar1 = new car ("red", 4,23 );
Ocar1.showcolor ();
Alert (ocar1 instanceof car );

 

Principle: the so-called class is just a function of JS. When the new operator is used before the function, an object instance is automatically created and this in the class points to this object, at the end of the function operation, this is returned. So its essence is the factory method.

Advantage: It looks more like a class declaration instance using the new operator

Disadvantage: the object functions are generated repeatedly.

3. Prototype

Function car (){
}
Car. Prototype. color = "red ";
Car. Prototype. Doors = 4;
Car. Prototype. mpg = 23;
Car. Prototype. showcolor = function (){
Alert (this. Color );
}

VaR ocar1 = new car ();
Ocar1.showcolor ();
Alert (ocar1 instanceof car );

Principle: Prototype in JS

Advantage: avoids repeated function Creation

Disadvantage: If the constructor attributes without parameters are of reference type (such as array), the attributes of one object will change, and the same attributes of the other object will also change.

4. constructor/prototype

Function car (scolor, idoors, impg ){
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
}
Car. Prototype. showcolor = function (){
Alert (this. Color );
}

VaR ocar1 = new car ("red", 4,23 );
Ocar1.showcolor ();
Alert (ocar1 instanceof car );

 

Advantage: avoids repeated creation of functions and avoids the disadvantages of referencing type attributes of constructor Methods

Disadvantage: The method is defined outside the class.

5. Dynamic Prototype

Function car (scolor, idoors, impg ){
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
If (typeof car. _ initialized = "undefined "){
Car. Prototype. showcolor = function (){
Alert (this. Color );
}
Car. _ initialized = true;
}
}

VaR ocar1 = new car ("red", 4,23 );
Ocar1.showcolor ();
Alert (ocar1 instanceof car );

 

Principle: car can also use the _ initialized flag to ensure that the method is declared only once.

Advantage: Avoiding repeated function creation attributes and methods are written in the class definition.

Disadvantages:

Iii. Classes I use

1. About private variables:

In JavaScript, private variables and public variables cannot be distinguished, but they can be distinguished by naming. It is generally used to adding two underscores (this) before and after the private variables. _ privatepropery _ or add an underscore (this) before the variable. _ privateproperty.

2. derived from the constructor Method

The second method -- constructor method has a great advantage in processing private variables! It can isolate private variables from the outside. This isolation uses VaR to declare private variables and methods in the class, while the common variables and methods are assigned to this.

Example:

Function car (scolor, idoors, impg ){
VaR self = this;
This. Color = scolor;
This. Doors = idoors;
VaR MPG = impg; // Private variable
This. showcarinfo = function (){
Alert (this. Color );
Alert (MPG); // not this. mpg
}
VaR privateshowcarinfo = function (){
// Only private variables can be accessed at this time
// Alert (this. Color); // Error
Alert (MPG); // accessible
// How can I access this. color? It is impossible for a private method to access public attributes?
// Set a private variable in the class to point to this instance // var self = this in the second row;
Alert (self. Color); // call successful // of course, the public method can also access self
}
This. anothershowcarinfo = function (){
Privateshowcarinfo ();
}
}

VaR ocar1 = new car ("red", 4,23 );
Ocar1.showcarinfo ();
Ocar1.anothershowcarinfo ();
Alert (ocar1 instanceof car );

 

In short: This. method can access this. Attribute and VAR variable

The VaR method can only access the VaR variable. You need to use the self variable to access this. attribute.

This is more object-oriented, but the constructor method still does not get rid of the problem, and the object functions will still be created repeatedly, however, I believe that this generally does not pose a threat to performance.

 Iv. Sample download

Click here to download the sample