Detailed analysis of four ways to create objects in JavaScript _javascript tips

Objective

There are a lot of ways to create objects using JavaScript, now to enumerate four of them, and to list the pros and cons of each, so you can choose to use them, and here's a look.

Factory mode

 function Createperson (name, age) {
 var obj = new Object ();
 Obj.name = name;
 Obj.age = age;
 return obj; Be sure to return otherwise print undefined:undefined
 }
 var person1 = new Createperson (' Young ', a);
 Console.log (Person1.name + ': ' + person1.age);

Advantages: Factory mode can resolve to create multiple similar objects

Disadvantage: No resolution of object recognition problems (how to determine the type of an object)

Constructor pattern

 function Person (name,age) {
 this.name = name;
 This.age = age;
 }
 var person1 = new Person (' young ',%);
 Console.log (Person1.name + ': ' + person1.age);

Before saying the pros and cons, let's talk about her own little story.

Use a constructor as a function

 function Person (name,age) {
 this.name=name;
 This.age=age;
 This.sayname=function () {return
 this.name;
 }
 }
 
 Use
 var person1 = new Person as constructor (' Young ';
 Person1.sayname ();
 Console.log (Person1.name + ': ' + person1.age);
 
 Call person as normal function
 (' wind ', a);
 Console.log (Window.sayname ());
 
 Call
 var obj = new Object () in another scope;
 Person.call (obj, ' bird ', MB);
 Console.log (Obj.sayname ());

Advantages and disadvantages of constructors

Advantage: You can identify an instance of it as a specific type

Disadvantage: Each method is recreated on each instance. Of course, you can also change this way:

 function person (name, age) {
 this.name = name;
 This.age = age;
 This.sayname = Sayname;
 }
 function Sayname () {return
 this.name;
 }

Call the global function instead, so there is no encapsulation to speak of ... The next prototype model can make up for this deficiency.

Prototype mode

 function person () {
 
 }
 Person.prototype.name = ' young ';
 Person.prototype.age =;
 Person.prototype.sayName = function () {return
 this.name;
 }
 
 var person1 = new Person ();
 Console.log (Person1.sayname ());
 var person2 = new Person ();
 Console.log (Person1.sayname ());
 Alert (Person1.sayname = = person2.sayname);
 Person1 and Person2 are accessing the same sayname () function of the same set of properties

Although you can access values stored in the prototype through an object instance, you cannot override the values in the prototype through the instance object

 function person () {
 
 }
 person.prototype.name= ' young ';
 person.prototype.age=18;
 Person.prototype.sayname=function () {return
 this.name;
 }
 
 var person1=new person ();
 var person2=new person ();
 Person1.name= ' Wind ';
 
 Console.log (Person1.sayname ());//wind
 Console.log (Person2.sayname ());//young
 alert (person1.sayname== Person2.sayname);//true

When we call person1.sayName , will perform two searches successively, the parser first determines whether the instance Person1 has sayName the attribute, has the call own attribute, does not search the attribute in the prototype.

 function person () {
 
 }
 person.prototype.name= ' young ';
 person.prototype.age=18;
 Person.prototype.sayname=function () {return
 this.name;
 }
 
 var person1=new person ();
 var person2=new person ();
 
 Person1.name= ' Wind ';
 Console.log (Person1.sayname ());//wind
 Console.log (Person2.sayname ());//young
 
 delete person1.name;
 Console.log (Person1.sayname ());//young
 Console.log (Person2.sayname ());//young

Use hasOwnPropertyType methods to detect whether a property exists in the prototype or in an instance, which is inherited from object, true in the instance, and false in the prototype.

Enumeration methods for instance properties on objects Object.keys()

 function person () {
 
 }
 person.prototype.name= ' young ';
 person.prototype.age=18;
 Person.prototype.sayname=function () {return
 this.name;
 }
 
 var keys=object.keys (person.prototype);
 Console.log (keys);//["Name", "Age", "Sayname"]

Prototype model Advantages and disadvantages

Advantages: Do not use each method to repeat on each instance

disadvantage: Few people use the prototype pattern alone. A detailed list of questions

 function person () {
 
 }
 person.prototype={
 Constructor:person,
 name: ' Young ',
 age:18,
 friends:[' big ', ' Pig '],
 sayname:function () {return
 this.name;
 }
 };
 var p1=new person ();
 var p2=new person ();
 P1.friends.push (' Mon ');
 Console.log (p1.friends);//["Big", "Pig", "Mon"]
 console.log (p2.friends);//["Big", "Pig", "Mon"]

It is precisely because the instance has its own attributes, and we place him here Person.prototype , so as the P1 changes, the whole instance, including the prototype, has been modified. So, we can combine the constructor pattern with the prototype schema.

Combining constructor patterns with prototype patterns

 function Person (name,age) {
 this.name=name;
 This.age=age;
 this.friends=[' big ', ' Pig '];
 person.prototype={
 sayname:function () {return
 this.name;
 }
 };
 var p1=new person (' young ', a);
 var p2=new person (' wind ',);
 P1.friends.push (' Raganya ');
 Console.log (p1.friends);//["Big", "Pig", "Raganya"]
 console.log (p2.friends);//["Big", "Pig"]
 Console.log (p1.friends==p2.friends);//false
 Console.log (p1.sayname==p2.sayname);//true

This pattern is one of the most widely used and most agreeable ways to create a custom type. is a default mode used to define a reference type.

Summarize

This is all about analyzing the way you create objects in JavaScript, and this article summarizes four ways and their pros and cons, hoping to help you learn how to use JavaScript.