We know that JS is object-oriented. When it comes to object-oriented, it is inevitable to involve the concept of class. Generally, like C#,java, these strongly typed languages have a fixed syntax for defining classes. JS differs in that it can use various methods to implement its own classes and objects. The general implementation has the following ways:
1. Factory mode
The factory approach is to create a factory function that returns a specific type of object, the sample code is as follows:
Copy Code code as follows:
function Createcar (SCOLOR,IDOORS,IMPG)
{
var otempcar=new Object;
Otempcar.color=scolor;
Otempcar.doors=idoors;
Otempcar.mpg=impg;
Otempcar.showcolor=function ()
{
alert (This.color);
}
return otempcar;
}
var ocar1=createcar ("Red", 4,23);
var ocar2=createcar ("Blue", 3,25);
Ocar1.showcolor ();
Ocar2.showcolor ();
This way, each time the factory function is invoked, a new object will be created. The problem is that each time a new object is generated, a new function showcolor is created, which makes each object have its own Showcolor version, and in fact, All objects share the same function. To solve this problem, the developer defines the object's method outside the factory function, and then gives the object a pointer to this function, as follows
Copy Code code as follows:
function Showcolor ()
{
alert (This.color);
}
function Createcar (SCOLOR,IDOORS,IMPG)
{
var otempcar=new Object;
Otempcar.color=scolor;
Otempcar.doors=idoors;
Otempcar.mpg=impg;
Otempcar.showcolor=showcolor;
return otempcar;
}
var ocar1=createcar ("Red", 4,23);
var ocar2=createcar ("Blue", 3,25);
Ocar1.showcolor ();
Ocar2.showcolor ();
This does not require creating your own Showcolor function for each object, but simply creating a pointer to the function. This solves the problem from a functional point of view, but the function does not look like an object's method. Thus, the way of constructing the function is educed.
2. Constructor function mode
Constructors are similar to factory functions, and the sample code is as follows:
Copy Code code as follows:
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);
var ocar2=new car ("Blue", 3,25);
In the constructor, there is no internal creation object, but the This keyword is used. When you call a constructor by using the new operator, you create an object before the first line of code is executed, and this is the only way to access the object. But what is the problem, obviously, each of its objects will also create its own version of the Showcolor function. To solve this problem, the following prototype method is introduced.
3. Prototype mode
This method utilizes the prototype attribute of the object, which can be viewed as the prototype on which the new object is created. Here, use the empty constructor to set the class name. Then all the methods and attributes are given directly to the prototype attribute. As follows:
Copy Code code as follows:
function car ()
{}
Car.prototype.color= "Red";
car.prototype.doors=4;
car.prototype.mpg=23;
Car.prototype.drivers=new Array ("Mike", "Sue");
Car.prototype.showcolor=function ()
{
alert (This.color);
}
The prototype method can only be assigned directly, not by passing parameters to the constructor to initialize the property's value. In this way, you will encounter two problems, do not know that you do not notice. The first problem is that you have to create each object in this way before you can change the default value of the property. Instead of creating each object directly, you will have the property values you want. This is disgusting. The second problem is when the attribute refers to an object. There are no problems with function sharing, but there are problems with object sharing. Because each instance typically implements its own object.
As below:
Copy Code code as follows:
var ocar1=new car ();
var ocar2=new car ();
OCar1.drivers.push ("Matt");
alert (ocar1.drivers);//Output "Mike,sue,matt"
alert (ocar2.drivers);//Output "Mike,sue,matt"
So the drivers property is just a pointer to an object, so all instances actually share the same object. As a result of these problems, we have elicited the following federated use constructors and prototypes.
4. Mixed constructor/prototype mode
The idea of this approach is to define the object's function properties (methods) in a prototype manner, using a constructor that defines all the non function attributes of the object, including the normal properties and the attributes that point to the object. As a result, all functions are created only once, and each object has its own instance of object attribute. The sample code is as follows:
Copy Code code as follows:
function car (scolor,idoors,impg)
{
This.color=scolor;
This.doors=idoors;
This.mpg=impg;
This.drivers=new Array ("Mike", "Sue");
}
Car.prototype.showcolor=function ()
{
alert (This.color);
}
var ocar1=new car ("Red", 4,23);
var ocar2=new car ("Blue", 3,25);
OCar1.drivers.push ("Matt");
alert (ocar1.drivers);//Output "Mike,sue,matt"
alert (ocar2.drivers);//Output "mike,sue"
It is known from the instance code that this approach solves both problems of the previous approach. However, in this way, some developers still do not feel perfect.
5. Dynamic Prototyping Mode
We know that most object-oriented languages are visually encapsulated in attributes and methods. The Showcolor method of the above approach is defined outside the class. Therefore, they designed the dynamic prototyping method. The basic idea of this approach is the same as the mixed constructor/prototype approach, the only difference being the location of the object method. As shown below:
Copy Code code as follows:
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;
}
This way Car.prototype.showColor is only created once. So dependent, this code is more like a class definition in other languages.
6. Mixed Factory mode
This approach is usually a workaround that should not be used in the previous way. It is designed to create a fake constructor and return only a new instance of another object.
Copy Code code as follows:
function Createcar ()
{
var otempcar=new Object;
Otempcar.color= "Red";
otempcar.doors=4;
otempcar.mpg=23;
Otempcar.showcolor=function ()
{
alert (This.color);
};
return otempcar;
}
var car=new car ();
Because the new operator is called inside the car () constructor, the second new operator is automatically ignored. Objects created inside the constructor are passed back to the variable var. This approach has the same problem with the classic approach to the internal management of object methods. So it is highly recommended that you avoid using this approach unless you have to.
