About JS design mode (simple Factory mode, constructor mode, prototype mode, mixed mode, dynamic mode)

<1> Factory mode

In short, the encapsulated code, simple Factory mode is very well understood, about its role, is to use the object-oriented approach, some objects are encapsulated, so that some space-intensive, duplicate code package up. The implementation method is very simple, which is to create an object within the function, give the object properties and methods to return the object.

function Creatper (name,age) {

var per=new Object (); Raw materials

Processing

Per.name=name;

Per.age=age;

Per.sayhi=function () {

Console.log (per.name+ ' +per.age); }

return per; Factory

}

var me=creatper (' Katherine ', 22);

Me.sayhi ();

Console.log (Me.Name);

As you can see, using the Factory mode, you can repeatedly call this per function to generate different properties worthy of the object, this is like a factory, mass production, the inside of raw materials, processing, the factory is very clear. But you will find that the factory pattern is not an object type, because it is all object, not like Date,array, but the constructor is not. This is only a simple factory model, complex Factory mode (abstract mode) and so on later come back to learn more.

<2> constructor Mode

ECMAScript constructors can be used to create specific objects, similar to native JS objects such as Array,date

function Student (Name,age,classa) {
This.name=name;
This.age=age;
This.classa=classa;
This.sayhello=function () {
Console.log (This.name,this.age,this.classa);
}
}
var me=new Student ("Xiaoai", 22, "juniors");
Console.log (Me.classa);
Me.sayhello ();
Console.log (Me instanceof Student);//true

As you can see from the code, in addition to the function names in the Factory mode, note that the first letter of the constructor name is capitalized (although it seems not to be strictly specified). The constructor also does not display the created object, and this is used to assign properties and methods directly to the This object. There is no return statement, it is instantiated with new, and it recognizes the object (which is where the constructor pattern is better than the factory pattern).

Although the constructor is useful, but also has a great disadvantage, that is, each time you create an instance to recreate the method, the actual application, each time the object is created with different property values, and the method of the object is the same, so create two times exactly the same method is not necessary, So someone would say that you can put a function method outside the object. As follows:

function Student (Name,age,classa) {
This.name=name;
This.age=age;
This.classa=classa;

}
function SayHello () {
Console.log (This.name,this.age,this.classa);
}
var me=new Student ("Xiaoai", 22, "juniors");
Console.log (Me.classa);
Me.sayhello ();
Console.log (Me instanceof Student);

Such a change, the SayHello function is set to the global function, so that every instance of student access is the same function, but in the global scope to define a function only for student, it seems a bit too much, If you define many of these methods in the global scope that are only used by specific objects, it is a waste of space and obviously loses the encapsulation of object-oriented, so it is entirely possible to use prototypes to solve this problem.

<3> prototype mode

JS specifies that each function created has a prototype (prototype) attribute, which is a pointer to an object, which is used to contain properties and methods that are shared by all instances of a particular type, and the prototype object allows all instance objects to contain these properties and methods.

function per () {}

Per.prototype.name= ' Xiaoai ';

per.prototype.age=22;

per.prototype.course=[' php ', ' JavaScript ', ' Java ', ' C # ';

Per.prototype.say=function () {

Console.log (This.name+this.age+this.course);

}

var per1=new per ();

var per2=new per ();

Per1.name= ' Katherine ';

Per1.course.push (' Html5 ');

Per1.say ();

Per2.say ();

Per2.course.pop ();

On the shortcomings of the prototype model, I think it is also very obvious, it omitted the constructor to pass the initialization parameters this link, the result all instances are the same property value by default, although you can make changes later, but it is not convenient, this is not the biggest problem, The biggest problem with prototype mode is that the nature of sharing is the result of sharing, so one instance modifies the reference and the other changes the property. Therefore, prototyping patterns are not normally used alone.

<4> Mixed Mode (prototype Mode + constructor)

function per (name,age,course) {

This.name=name;

This.age=age;

This.course=course;

}

Per.prototype.say=function () {

Console.log (This.name+this.age+this.course);

}

var per1=new per (' Katherine ', 22,[' C # ', ' Java ', ' PHP ', ' Javascript ');

var per2=new per (' Xiaoai ', 21,[' Oracle ', ' MySQL ', ' nodejs ', ' HTML5 ');

Per1.say ();

Per2.say ();

Per1.course.pop ();

Per1.say ();

Per2.say ();

The code shows the division of the blending pattern: constructors are used to define the properties of an instance, whereas the prototype pattern is used to define methods and some shared properties. Each instance will have its own properties, but at the same time sharing the method, the maximum memory savings. In addition, this mode also supports passing the initial parameters. Most widely used.

<5> Dynamic Mode

function per (name,age,course) {

This.name=name;

This.age=age;

This.course=course;

if (typeof this.say!= ' function ') {

Per.prototype.say=function () {

Console.log (This.name+this.age+this.course);

}

}

}

var per1=new per (' Katherine ', 22,[' C # ', ' Java ', ' PHP ', ' Javascript ');

var per2=new per (' Xiaoai ', 22,[' Oracle ', ' MySQL ', ' nodejs ', ' HTML5 ');

Per1.say ();

Per2.say ();

Per1.course.pop ();

Per1.say ();

Per2.say ();

About JS design mode (simple Factory mode, constructor mode, prototype mode, mixed mode, dynamic mode)