Several Ways of Creating JS Objects

Recently, I am reading the book JS Advanced Programming, and I am free to sort out several ways to create objects. Without saying much, get down to business.

Type 1: Object constructor creates

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

This line of code creates a new instance of the Object reference type, and then saves the instance in the variable Person.

Type 2: Use object literal representation

var Person = {};// Equivalent to var Person = new Object();
var Person = {
 name:'Nike';
 age:29;  
}

Object literals are a shorthand for object definitions designed to simplify the process of creating objects that contain a large number of attributes. That is to say, the methods of creating objects in the first and second ways are actually the same, but the differences in writing are different

Before introducing the third creation method, we should understand why we should use other methods to create objects, that is, the disadvantages of the first and second methods are: they all use the same interface to create many objects, which will produce a lot of duplicate code, that is, if you have 100 objects, you have to type many identical codes 100 times. Then we have what method to avoid too much duplication of code, is to create the process of the object encapsulated in the function body, through the call of the function directly generated objects.

Type 3: Create objects using factory mode

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name); 
 };
 return o; 
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

When creating objects using factory mode, we can all notice that in the createPerson function, 1 object is returned. Then we can't judge what type of object the returned object is. Thus, the fourth mode of creating objects appears.

Type 4: Create an object using a constructor

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }; 
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');

Compared with the factory model, we can find the following differences:

1. Create an object without showing it

2. Assign properties and methods directly to this objects

3. No return statement

4. The type of object that can finally be recognized. For detecting object types, we should use the instanceof operator, and we will do autonomic detection:

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

At the same time, we should also understand that, by convention, constructors should always start with 1 uppercase letter, while non-constructors should start with 1 lowercase letter.

Then the constructor is really easy to use, but it also has its shortcomings:

This means that each method has to be recreated once on each instance. A method is a function that we define in an object. If the number of methods is large, it will take up a lot of unnecessary memory. So the fifth method of creating objects appears

Type 5: Prototype creation object pattern

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName();

The way an object is created using a prototype allows all object instances to share the properties and methods it contains.

If you are using prototypes to create object patterns, look at the following code:

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' -- From the instance 
alert(person2.name); //'Nike' -- From Prototype 

When you add a property to an object instance, this property masks the property of the same name held in the prototype object.

At this point, we can use a combination of constructor patterns that define instance properties and prototype patterns that define methods and shared properties

Type 6: Combining constructor pattern and prototype pattern

function Person(name,age,job){
 this.name =name;
 this.age = age;
 this.job = job;
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
 alert(this.name);
 };
}
var person1 = new Person('Nike',20,'teacher');