Brief analysis of the method of creating javascript objects

1. Factory model

 function person (name,age) { var p=new Object(); p.name=name; p.age=age; p.showMessage=function(){ console.log("name:"+this.name+" age:"+this.age); } return p;}var p1=person("k1",28);var p2=person("k2",29);console.log(p1.showMessage==p2.showMessage);//false is not the same showMessage method console.log(p1.constructor);//[object] are all objects

The defect of factory pattern is that the problem of object recognition is not solved, and the showMessage method of each object is not the same method (each method is recreated on each object instance), which increases the overhead

2. Constructor mode

 function Person (name,age) { this.name=name; this.age=age; this.showMessage=function(){ console.log("name:"+this.name+" age:"+this.age); }}var p1=new Person("k1",28);var p2=new Person("k2",29);console.log(p1.showMessage==p2.showMessage);//false Not the same showMessage method console.log(p1.constructor);//[Person]console.log(p1 instanceof Person);// true

The constructor pattern solves the problem of object recognition, but the showMessage method of each object is not the same method (each method is recreated on each object instance), which increases the overhead

3. Prototype mode

 function Person () { }Person.prototype.name ="k";Person.prototype.age =29;Person.prototype.showMessage=function () { console.log("name:"+this.name+" age:"+this.age);};var p1=new Person();p1.showMessage();//name:k age:29var p2=new Person();p2.showMessage();//name:k age:29console.log(p1.showMessage==p2.showMessage);// true --The reference is the same function console.log(p1.constructor)//[Person] --Object recognition console.log(p1 instanceof Person)//true --Object recognition console.log(Person.prototype.isPrototypeOf(p1));// trueconsole.log(Object.getPrototypeOf(p1)==Person.prototype);// true

Prototype pattern solves the problem of "each method is recreated on each object instance" and also solves the problem of object recognition.

A big problem with the prototype mode is that all objects, variables, and functions mounted under the function prototype are shared by all instances of the function. Although the properties of the prototype can be accessed through instances p1 and p2, the property value cannot be modified. For example, p1.name="k1", it only adds a property of name="k1" on the p1 instance, and does not change to prototype.name. It's okay if it's a value type, but if it's a reference type, there will be problems. See the following example

 function Person () { };Person.prototype.age =10;Person.prototype.array=[1,2,3];var p1=new Person();var p2=new Person();console.log(p1.array);// [1,2,3]console.log(p2.array); //[1,2,3]p1.array.push(4);console.log(p1.array);//[1,2,3,4]console.log(p2.array);//[1,2,3,4]

p1 adds a value to the array, which is also reflected in p2 because they all point to the same array

4. Combining constructor mode and prototype mode

This is the most common way to create objects, combining the advantages of constructors and prototype patterns

 function Person (name,age) { this.name=name; this.age=age;}Person.prototype.showMessage = function() { console.log("name:"+this.name+" age:"+this.age);};var p1=new Person("k",30);p1.showMessage();

5. Dynamic prototype mode

The main solution is: encapsulate all information in the constructor, which is more in line with the idea of oo

 function Person (name,age) { this.name=name; this.age=age; if(typeof this.showMessage!="function"){ Person.prototype.showMessage=function(){ console.log("name:"+this.name+" age:"+this.age); } }}var p1=new Person("k",30); p1.showMessage();

6. Parasitic constructor pattern

 function Person (name,age) { var o=new Object(); o.name=name; o.age=age; o.sayName=function(){ console.log(this.name); }; return o;}var p1=new Person("k",28);p1.sayName();

The parasitic constructor pattern is exactly the same as the factory pattern, except that the new keyword is used when creating the object. The above example: var p1=new Person("k",28).

Its main function is: to expand functions in this constructor. For example, I want to define an array type MyArray, which is based on an Array array and has its own method, as follows

 function MyArray(){ var values=new Array(); values.push.apply(values,arguments); //The method defined by yourself values.toPipedString=function(){ return this.join('|'); }; return values;}var colors=new MyArray("red","blue","green");console.log(colors.toPipedString());console.log(colors instanceof Array);

7. Stable constructor mode

The safe constructor follows the pattern from the parasitic constructor type, but there are two differences: one is not to use this, and the other is not to use new to call the constructor.

 function Person (name,age) { var o=new Object(); var tempAge=age; o.name=name; o.age=age; o.sayName=function(){ console.log(name); } o.sayAge=function(){ console.log(tempAge); } return o;}var p1=Person("k1",28);p1.sayName(); // k1p1.sayAge(); // 28p1.name="k2";p1.age=30;p1.sayName(); // k1p1.sayAge(); //28

When you see the output above, you can understand what a safe object pattern is. It is an object created using this mode. There is no other way to change the value passed in during initialization. This is Person("k1", 28). Such an object is a safe object. In fact, it is a closure of JavaScript.

The above brief analysis of the method of creating a JavaScript object is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.