A summary of several ways to create objects in JS

I have been reading the book JS Advanced Programming recently, and I have some time to sort out several ways to create objects. Without further ado, let’s get straight to the point.

First type: Object constructor creation

 Person =  Object();

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

Second: Use object literal notation

 Person ='Nike'29

Object literal is a shorthand form of object definition, aiming to simplify the process of creating objects containing a large number of properties. In other words, the first and second methods of creating objects are actually the same, but the difference in writing is different

Before introducing the third creation method, we should understand why Use other methods to create objects, that is, the disadvantages of the first and second methods: They all use the same interface to create many objects, which will generate a lot of duplicate code , that is, if you have 100 objects, then you have to enter a lot of the same code 100 times. So what method do we have to avoid too much repeated code? That is to encapsulate the process of creating objects in the function body and directly generate objects through function calls.

Third method: Use factory mode to create objects

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 using factory mode to create objects, we can all notice that in the createPerson function, an object is returned. Then we cannot determine what type the returned object is. So there is a fourth mode of creating objects.

Fourth way: Create objects using constructors

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

Comparing the factory pattern, we can find the following differences:

　1. Create objects without display

2. Directly assign properties and methods to this object

3. No return statement

4. The type of object can finally be recognized. For detecting object types, we should use the instanceof operator to perform independent 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 According to convention, the constructor should always start with a capital letter, not Constructors should start with a lowercase letter.

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

That is, each method must be recreated on each instance. The method refers to The functions we define in the object. If the number of methods is large, it will occupy a lot of unnecessary memory. So there is a fifth way to create objects

The fifth way: Prototype creation object mode

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();

Using prototypes to create objects can be shared by all object instances The properties and methods it contains.

If you are using the prototype to create the object mode, please see 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'  --来自实例
alert(person2.name);  //'Nike'   --来自原型

When adding a property to the object instance, this property will be shieldedSaved in the prototype object attribute with the same name.

At this time we can use the combination of constructor pattern and prototype pattern. The constructor pattern is used to define instance properties, and the prototype pattern is used to define methods and shared properties

Eighth Type: Combined use of 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');

The above are the eight ways I have summarized to create objects. If there are any errors, please point them out.

The above is the detailed content of A summary of several ways to create objects in JS. For more information, please follow other related articles on the PHP Chinese website!