JavaScript Object Definition method easy to learn _js object oriented

Factory mode:
A beginner developer might define an object like this:
var obj = new Object ();
Obj.name = "Hero";
Obj.showname=function () {alert (this.name);}
The problem here is that if we were to use obj objects in more than one place, there might be similar code in the program that was written many times, and then a factory method was created.
function Createobj ()
{
var obj = new Object ();
Obj.name= "Hero";
Obj.showname=function () {alert (this.name);}
return obj;
}
var obj1 = Createobj ();
var obj2 = Createobj ();
and a different method of constructing the function method
function obj (name)
{
This.name=name;
This.showname= function () {alert (this.name);}
}
Encapsulate the code that generates the object, avoiding the repetition of new code, and, of course, further improvements, that is, createobj passing some parameters instead of assigning a 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 one problem is that we create new function ShowName every time we call the Createobj function. means that each object has its own version of the ShowName, so improve to avoid the 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 duplicating the creation function, hahaha, it's done.
Prototype mode:
It mainly utilizes the prototype attribute of the object.
function obj ()
{}
Obj.prototype.name= "Hero";
Obj.prototype.showname=function ()
{
alert (this.name);
}
Looks more perfect than the factory just now, but there is a problem, the function has no constructor, the attribute is specified by prototype, this is very annoying in the practical application, all the properties of the instance are not acceptable. In particular, there is a security risk, that is, when there is a reference to the object , such as adding such a paragraph
Obj.prototype.nameArray = new Array ("Hero", "Dby");
And then
obj1 = new obj ();
Obj2 = new obj ();
Obj1.nameArray.push ("LxW");
This property will also be seen in the namearray of Obj2, because the NameArray of two objects is pointing to the same reference.
So this is not the ideal way.
Need to improve
Combining constructors, defining attributes in constructors, using prototypes to define methods
For example
Fuction obj (name)
{
THIS.name = Name
This.namearray = new Array ("Hero", "Dby");
}
Obj.prototype.showName = function () {alert (this.name)}
All of the non function attributes are created in the constructor, the function properties are created in the prototype way, the value of the NameArray is changed in the Obj1, the NameArray value of the Obj2 object is not affected, and there is only one showname function, so there is no memory waste.
Basically perfect, the rest of the basic is a little bit of other modifications. Interested in the can change their own play.
The author here adds a single example to play a bit:
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, is not a single example, but in the construction of objects, the first to determine whether a property is defined, if there is no definition, then use the prototype method to continue to define the object, if the attribute has been defined, then do not repeat the definition of the function. The prototype method is only created once and the disease is assigned once.
It's almost perfect.
This is a personal understanding, hope for everyone to help, not perfect place please QQ contact, timely correction.
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 ();