Javascript Object definition method is easy to learn

Factory model:
Basic developers may define objects as follows:
Var obj = new Object ();
Obj. name = "hero ";
Obj. showName = function () {alert (this. name );}
There is a problem here that if we want to use the obj object in multiple places, we may have to write similar code many times in the program, so the factory method is generated.
Function createObj ()
{
Var obj = new Object ();
Obj. name = "hero ";
Obj. showName = function () {alert (this. name );}
Return obj;
}
Var obj1 = createObj ();
Var obj2 = createObj ();
And another method constructor Method
Function obj (name)
{
This. name = name;
This. showName = function () {alert (this. name );}
}
Encapsulate the code of the generated object to avoid repeated new code. Of course, it can be further improved by passing some parameters in createObj, rather than assigning the default fixed value to obj:
Function createObj (name)
{
Var obj = new Object ();
Obj. name = name;
Obj. showName = function () {alert (this. name );}
Return obj;
}
Var obj1 = createObj ("hero ");
Var o 'B' j2 = createObj ("dby ");
But there is a problem, that is, every time we call the createObj function, we will create a new function showName. This means that each object has its own version of showName, so we need to improve and avoid this problem.
Function showName ()
{
Alert (this. name)
}
Function createObj (name)
{
Var obj = new Object ();
Obj. name = name;
Obj. showName = showName;
Return obj;
}
This solves the problem of repeated function creation.
Prototype:
It mainly uses the prototype attribute of the object.
Function obj ()
{}
Obj. prototype. name = "hero ";
Obj. prototype. showName = function ()
{
Alert (this. name );
}
It seems to be more perfect than the factory just now, but there is a problem that this function has no constructor and its attributes are specified through prototype, which is a headache in practical application, the same attributes of all instances are unacceptable. in particular, there is also a security risk, that is, when an object is referenced, for example
Obj. prototype. nameArray = new Array ("hero", "dby ");
Then
Obj1 = new obj ();
Obj2 = new obj ();
Obj1.nameArray. push ("lxw ");
This attribute will also be seen in the nameArray of obj2, because the nameArray of the two objects points to the same reference.
Therefore, this method is not an ideal method.
Improvements required
In combination with constructors, the constructor defines attributes and uses the prototype definition method.
For example
Fuction obj (name)
{
This. name = name
This. nameArray = new Array ("hero", "dby ");
}
Obj. prototype. showName = function () {alert (this. name )}
All non-function attributes are created in the constructor. The function attributes are created in prototype mode. Changing the nameArray value in obj1 does not affect the nameArray value of the obj2 object, there is only one showName function, so there is no memory waste.
It is basically perfect, and the rest is basically a bit of modification. If you are interested, you can change it for fun.
The author adds a singleton here:
Function obj (name)
{
This. name = name;
This. nameArray = new Array ("hero", "dby ");
If (typeof obj. _ initialized = 'undefined ')
{
Obj. prototype. showName = function () {alert (this. name );}
Obj. _ initialized = "true ";
}
}
In fact, it is not a singleton. It is only when constructing an object that determines whether an attribute is defined. If not, use the prototype method to continue defining the object. If an attribute has been defined, then we will not define the function again. this prototype method is created only once and assigned once for illness.
It's almost perfect.
This is my personal understanding. I hope it will be helpful to you. If it is not perfect, contact qq to correct it in time.
This is a complete example:
Function Rectangle (name, color, width, heigth ){
This. name = name;
This. color = color;
This. width = width;
This. heigth = heigth;
}
Rectangle. prototype. area = function (){
Return this. width * this. heigth
}
Rectangle. prototype. show = function (){
Document. write (this. name + "" + this. color + "" + this. width + "" + this. heigth + "<br/> ");
Document. write (this. area ());
}
Var obj1 = new Rectangle ("Rectangle", "red", 15, 20 );
Obj1.show ();