Detailed analysis of four ways to create objects in Javascript

Preface

There are many ways to create objects using Javascript. Now let’s list four of them and list the advantages and disadvantages of each method, so you can choose and use it. Let’s take a look.

Factory model

 function createPerson(name, age){
 var obj = new Object();
  = name;
  = age;
 return obj; //Be sure to return, otherwise undefined:undefined }
 var person1 = new createPerson('Young',18);
 ( + ':' + );

advantage:Factory mode can solve the creation of multiple similar objects

shortcoming:No problem of object recognition (how to determine the type of an object)

Constructor mode

 function Person(name,age){
  = name;
  = age;
 }
 var person1 = new Person('Young',18);
 ( + ':' + );

Before talking about her pros and cons, let’s talk about her own story first.

Use constructors as functions

 function Person(name,age){
 =name;
 =age;
 =function(){
 return ;
 }
 }
 
 //Use as a constructor var person1 = new Person('Young', 18);
 ();
 ( + ':' + );
 
 //Asking it as a normal function call Person('Wind', 18);
 (());
 
 //Call in another scope var obj = new Object();
 (obj, 'bird', 100);
 (());

Advantages and disadvantages of constructors

advantage:Its instance can be identified as a specific type

shortcoming:Each method must be recreated on each instance. Of course you can change it like this:

 function Person(name, age){
  = name;
  = age;
  = sayName;
 }
 function sayName(){
 return ;
 }

Instead, call global functions, so there is no encapsulation. . . The following prototype mode can make up for this shortcoming

Prototype mode

 function Person(){
 
 }
  = 'Young';
  = 18;
  = function(){
 return ;
 }
 
 var person1 = new Person();
 (());
 var person2 = new Person();
 (());
 alert( === );
 //person1andperson2Accessing the same set of attributessayName()function

Although the value saved in the prototype can be accessed through the object instance, the value stored in the prototype cannot be rewrited through the instance object

 function Person(){
 
 }
 ='Young';
 =18;
 =function(){
 return ;
 }
 
 var person1=new Person();
 var person2=new Person();
 ='Wind';
 
 (());//Wind
 (());//Young
 alert(==);//true

In our callWhen the search is performed twice, the parser first determines whether the instance person1 hassayNameIf there is any attribute, you will call your own attribute, and if there is no attribute search for the attribute in the prototype.

 function Person(){
 
 }
 ='Young';
 =18;
 =function(){
 return ;
 }
 
 var person1=new Person();
 var person2=new Person();
 
 ='Wind';
 (());//Wind
 (());//Young
 
 delete ;
 (());//Young
 (());//Young

usehasOwnPropertyTypeA method can detect whether an attribute exists in a prototype or in an instance. The method is inherited from an Object, true in the instance and false in the prototype.

Enumerate instance properties on objects()method

 function Person(){
 
 }
 ='Young';
 =18;
 =function(){
 return ;
 }
 
 var keys=();
 (keys);//["name", "age", "sayName"]

Pros and cons of prototype mode

advantage:No need to reiterate every method on each instance

shortcoming:Few people use prototype mode alone. . List of questions in detail

 function Person(){
 
 }
 ={
 constructor:Person,
 name:'Young',
 age:18,
 friends:['Big','Pig'],
 sayName:function(){
 return ;
 }
 };
 var p1=new Person();
 var p2=new Person();
 ('Mon');
 ();//["Big", "Pig", "Mon"]
 ();//["Big", "Pig", "Mon"]

It is precisely because instances generally have their own attributes, and we have put them hereTherefore, with the modification of p1, the entire instance, including the prototype, is modified. Then, we can use a combination of constructor mode and prototype mode.

Use constructor mode and prototype mode in combination

 function Person(name,age){
 =name;
 =age;
 =['Big','Pig'];
 }
 ={
 sayName:function(){
 return ;
 }
 };
 var p1=new Person('Young',18);
 var p2=new Person('Wind',78);
 ('Raganya');
 ();//["Big", "Pig", "Raganya"]
 ();//["Big", "Pig"]
 (==);//false
 (==);//true

This pattern is currently the most widely used and most recognized method of creating custom types. is a default mode used to define reference types.

Summarize

The above is all about analyzing the way objects are created in Javascript. The four methods and their advantages and disadvantages have been summarized by this article. I hope it can be helpful for everyone to learn to use Javascript.