Ways to create custom objects in Javascript (design mode)

There are many ways to create objects in Javascript.

The object constructor/object literal:

Aside from the design pattern, the most basic approach is to call the object constructor to create an object and then add properties to the object.

1     var New Object (); 2     Student.name = "Xiao Ming"; 3     Student.age =; 4     function () {5         alert (this. Name); 6     }

Students who are familiar with JavaScript object literals can get a better way of writing, at least looking more concise.

1     var student = {2         name: "Xiao Hong",3         age:18,4          function  () {5             alert (this. Name); 6         }7     };

Cons: One drawback of the above approach is that when creating many similar objects using the same interface, a lot of duplicated code is generated. This should be easy to understand, the function (method or class) is generally used to create a common method, the above object creation process, there is no function of the shadow, so there is no reuse.

Factory mode:

Factory mode abstracts the process of creating objects specifically. Just like a black box, you just call the function (enter the factory) and pass in the corresponding parameters (various raw materials), you will come up with a corresponding object (factory-produced products). Factory mode solves the problem of creating multiple similar objects.

1     functionstudentfactory (name,age) {2         varStudent =NewObject ();3Student.name =name;4Student.age =Age ;5Student.sayname =function () {6Alert This. Name);7         }8         returnstudent;9     }Ten     varP1 = Studentfactory ("Ming", 20); One     varP2 = studentfactory ("Hong", 18);

Disadvantage: The factory model also has shortcomings, the biggest disadvantage is the object type recognition problem. You can only tell that the object is of type objects (P1 instanceof object), but not exactly what type it is. The student created using Factory mode actually have similar properties and methods, but the values are different. A better workaround is to create a Student function so that all objects belong to the Student type. So the factory model is not bad, but the constructor mode is better.

Constructors for custom types:

Constructors can be used to create objects of a specific type.

1     functionStudent (name,age) {2          This. Name =name;3          This. Age =Age ;4          This. Sayname =function () {5Alert This. Name);6         }7     }8     varP3 =NewStudent ("Ming", 20);9     varP4 =NewStudent ("Hong", 18);TenAlert (P3instanceofStudent);
alert (p3.sayname==p4.sayname); False

Cons: The disadvantage of a custom constructor is that each object will recreate its own method, in fact the functions of these methods are the same (like Sayname), but they are not the same (P3.sayname and p4.sayname are not equal).

Prototype mode:

Define an empty function, and then add all the properties and methods to the prototype so that all the objects will share the properties and methods.

1     function Student () {}; 2     Student.prototype.name = "Ming"; 3     Student.prototype.age = ; 4     Student.prototype.friends = [' Qi ']; 5     function () {6         alert (this. Name); 7     };

Cons: Some properties cannot be shared, and sharing brings back problems, for example: friends. Most of the students ' friends are not the same.

A combination of constructors and prototypes:

1     functionStudent (name, age, friends) {2          This. Name =name;3          This. Age =Age ;4          This. Friends =friends;5     }6Student.prototype = {7 Constructor:student,8Sayname:function () {9Alert This. Name);Ten         } One};

Summary: The combination of constructors and prototypes is a widely recognized method for creating custom types. is also the best method in the above methods.

Ways to create custom objects in Javascript (design mode)