Common ways Javascript creates objects

Heart words: the impossible may come true today, and the impossible may come true tomorrow.

Javascript is an object-oriented language. Everything is an object. Are we really familiar with how to create objects? Next, I will introduce a common way to create objects.

1. Create objects in literal mode

Using literal is a more common way in development, because it is easier to create objects with it. In real life, we are an object, and people also have many physical characteristics, such as name, age, gender and so on

var person = {
	name:"Mu Xiaojia",
	age:18,
	sex:"male",
	habby:["Travel","Fight hero League","Listen to the music"]
}

The above is to simply create a person object, but although this method is relatively simple to create objects, if we want to create multiple different objects, we need to write a lot of repeated code. Simple and violent code is often difficult to consider comprehensively.

2. Create object in factory mode

The so-called factory mode factory mode is to use functions to encapsulate the details of creating objects, create objects in functions and return objects, just like the pipeline in a factory. The factory pattern abstracts the process of creating concrete objects, which will improve the efficiency a lot.

function person(name,age,sex){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sex= sex;
    o.eat= function(){
        alert(this.name+"I like tomatoes");
    };
    return o;
}
var person1 = person("Mu Xiaojia",18,"male");
var person2 = person("Ximen blow lamp",26,"male");

Disadvantages: the factory mode only pursues the efficiency of production objects. Although it solves the problem of creating multiple similar objects, it does not solve the problem of object recognition (that is, how to know the type of an object).

3. Create object by constructor

//Note: constructor function names must be capitalized
function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
    this.eat= function(){
     console.log(this.name+"I like tomatoes"); 
    };
   this.sayName= function(){
 		console.log(this.name); 
    };
}
var person1 = new Person("Mu Xiaojia",18,"male");
var person2 = new Person("Ximen blow lamp",26,"male");
console.log(person1.sayName());   // Mu Xiaojia
console.log(person2.sayName());   // Ximen blow lamp

Disadvantages:

  • From the above code, we can see that the methods with the same name on different instance objects are actually different. Both person1 and person2 have a method named sayName(), but the two methods are not instances of the same Function. It is really unnecessary to create two Function instances to complete the same task, resulting in code redundancy.
  • If an object needs to define many methods, it is also troublesome to define many global functions.

4. Prototype pattern creation object

Each function we create has a prototype property. This property is a pointer to an object. The purpose of this object is to contain properties and methods that can be shared by all instances of a specific type. The advantage of using a prototype object is that all object instances can share its properties and methods.

function Person(){}
Person.prototype.name = 'Mu Xiaojia';
Person.prototype.age = '18';
Person.prototype.sex= 'male';
Person.prototype.sayName = function(){
    console.log(this.name); 
};
var person1 = new Person();
var person2 = new Person();

//When modifying name on prototype object
person1.name="Ximen blow lamp";
//here
console.log(person1.name);  // Ximen blow lamp
console.log(person2.name);  // Ximen blow lamp

We will be surprised to find that we have modified the name on the person1 instance object. Why does the name on the person1 instance object also change? In fact, the instance object points to the prototype object of the same constructor, which will have an impact

Disadvantages: the problem of prototype mode is sharing. If you change the instance or prototype, it will change accordingly in other instances.

5. Create objects by combining constructor mode and prototype mode

This method combines the advantages of the constructor pattern and the prototype pattern. The constructor pattern is used to define the instance's own properties, and the prototype pattern is used to determine the method and shared properties.

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
}
Person.prototype = {
    constructor: Person, //The constructor specified by the last constructor here, otherwise it may point to Object
    sayname: function(){
         console.log(this.name); 
    }
}
var person1 = new Person("Mu Xiaojia",18,"male");
console.log(person1.sayname());   // Mu Xiaojia

The above methods are commonly used to create objects. The specific use depends on the business scenario. Each has its own advantages and disadvantages. I hope they can help you~

Tags: Javascript

Posted on Sat, 11 Sep 2021 18:42:56 -0400 by Tomcat13