Study Notes on JavaScript advanced programming (4): javascript classes and objects

Different from other advanced languages, JavaScript classes and objects are special.

1. JavaScript does not have a real class.

2. JavaScript does not support early binding because it is not a strongly typed language.

3. In JS, all objects are not created in the same way. They are generally divided into three types:

(1) local objects: defined as "objects provided by JS implementations independent of the host environment ". Including object, function, array, String, Boolean, number, date, Regexp, error, evalerror, rangeerror, referrenceerror, syntaxerror, typeerror, urierror.
(For details, see another article.Article(Use of common local objects in Javascript ))

(2) built-in object: defined as the object provided by the JS implementation independent of the host environmentProgram". From the definition, we can see that each built-in object is a local object. There are two built-in objects: Global and math.

(3) Host Object: defined as "objects provided by the host environment with JS implementation ". All Dom and BOM objects are host objects.

4. Scope.

The scope of objects in JS is almost meaningless, because JS only has one scope, which is a public scope. Therefore, you must be extremely careful when defining your own classes or objects, because they are all public by default.

5. This keyword

This always points to the object that calls this method.
VaR ocar = new object;
Ocar. color = "red ";
Ocar. showcolor = function (){
Alert (this. Color); // outputs "red", this points to ocar
}

6. Definition class:
(1). Factory method
Function createcar (scolor, idoors, impg ){
VaR ocar = new object;
Ocar. Color = scolor;
Ocar. Doors = idoors;
Ocar. mpg = impg;
Ocar. showcolor = function (){
Alert (this. Color );
}
 
Return ocar;

}

VaR ocar1 = createcar ("red", 4,23 );
VaR ocar2 = createcar ("blue", 2, 20 );
Ocar1.showcolor (); // ouputs "red"
Ocar2.showcolor (); // outputs "blue"

The disadvantage of this factory method is that each time craetecar is called, a new function showcolor () is created, and each object has its own showcolor version.

(2). constructor Method
Function createcar (scolor, idoors, impg ){
VaR ocar = new object;
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
This. showcolor = function (){
Alert (this. Color );
}
}
VaR ocar1 = new createcar ("red", 4,23 );
VaR ocar2 = new createcar ("blue", 2, 20 );

The same as the factory method, the constructor will also generate functions repeatedly, creating independent function versions for each object.

(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 ();
VaR ocar2 = new car ();

This method uses the prototype attribute of the object and uses an empty constructor to set the class name. Then, all attributes and methods are directly assigned the prototype attribute.

Problem: 1. the constructor has no parameters. When using the prototype method, you cannot pass the parameter initialization attribute to the constructor. 2. This is also the most critical problem. When the attribute points to an object
Instead of functions, objects are shared by multiple instances (function sharing does not cause any problems ):
Function car (){
Car. Prototype. color = "red ";
Car. Prototype. Doors = 4;
Car. Prototype. mpg = 23;
Car. Prototype. dirvers = new array ("Mike", "Sue ");
Car. Prototype. showcolor = function (){
Alert (this. showcolor );
}
}
VaR ocar1 = new car ();
VaR ocar2 = new car ();

Ocar1.dirvers. Push ("Matt ");

Alert (ocar1.dirvers): // outputs "Mike, Sue, Matt"
Alert (ocar2.dirvers): // outputs "Mike, Sue, Matt"

Changed ocar1.dirvers and also changed ocar2.dirvers !!!

(4). Mixed constructor/prototype
This method draws on the advantages of constructor and prototype:
Function car (scolor, idoors, impg ){
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
This. dirvers = new array ("Mike", "Sue ");
}
Car. Prototype. showcolor = function (){
Alert (this. Color );
}

VaR ocar1 = new car ("red", 4,23 );
VaR ocar2 = new car ("blue", 2, 23 );

Ocar1.drivers. Push ("Matt ");

Alert (ocar1.drivers); // outpust "Mike, Sue, Matt"
Alert (ocar2.drivers); // outputs "Mike, Sue"

In this way, all non-function attributes are created in the constructor, while the showcolor function is created in the prototype to avoid Memory waste. This solution is perfect in addition to being visually unaccustomed.

(5). Dynamic Prototype Method

As mentioned above, the hybrid constructor/prototype is not visually used to humans. Encapsulation is not clear. The Dynamic Prototype Method is generated.
The only difference is that the location of the object method is assigned:
Function car (scolor, idoors, impg ){
This. Color = scolor;
This. Doors = idoors;
This. mpg = impg;
This. Drivers = new array ("Mike", "Sue ");
If (typeof car. _ initialized = "undefined "){
Car. Prototype. showcolor = function (){
Alert (this. Color );
}
}
Car. _ initialized = true;

}

In this encapsulation, traditional OOP developers will be happy to find that it looks much more comfortable.

(6) hybrid Factory
Function car (){
VaR ocar = new object;
Ocar. color = "red ";
Ocar. Doors = 4;
Ocar. mpg = 23;
Ocar. showcolor = function (){
Alert (this. Color );
}
Return ocar;
}

VaR car = new car ();
Different from the factory method, the new method is used only to generate objects. In fact, because the constructor calls New internally, this new will be ignored.

This method has the same problems as the classic factory method. This method is not recommended.