Introduction to several common modes of creating objects in javascript

This article introduces several commonly used patterns for creating objects in JavaScript, including: factory pattern, constructor pattern, prototype pattern, pattern of combining constructors and prototypes, and dynamic prototype pattern.

1. Factory pattern

Look at the following code:

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

This is the factory pattern. Define an object in the function, add properties and methods to it, and finally return the object. Although this mode enables convenient creation of objects, there is a problem that it is impossible to determine who created this instance.
For example, son1 intanceof getMySon cannot return true. Because the instance here is not exactly created by getMySon through new, but o in getMySon.
So the factory pattern is not suitable for situations where many types of objects need to be created.

So how do you create an object to correctly determine where the instance comes from? Now let’s talk about the constructor pattern.

2. Constructor mode

Look at the following code:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

This is the constructor mode. Please use new when calling.

When making a new call, perform the following steps:

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

Instances generated in this way can use son1 instanceof getMySon to determine who generated the instance.

So what's the problem with using constructors? Since a new object is created every time new is used, all data is not shared between different instances. But for the function sayName, it is not necessary to create multiple ones. Doing so wastes space.

This leads to the next type, prototype mode.

3. Prototype mode

Look at the following code:

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

This is the prototype mode (prototype-related knowledge will not be discussed in detail here).

The prototype mode adds properties and methods to getMySon.prototype. The prototype is shared by all instances. It has only one copy, not all instances have one copy.

This method allows only one copy of the function without taking up extra space. However, attributes such as name and sex do not need to be shared among all instances, and it is inconvenient to use the prototype mode to pass parameters to generate these attributes.

Then you can merge the constructor pattern and the prototype pattern and take advantage of their respective advantages. Properties that do not need to be shared between instances and need to be generated by passing parameters are generated in the constructor mode, and properties that need to be shared among each instance (such as methods) are generated in the prototype mode.

3. The pattern of combining constructors and prototypes
Look at the following code:

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

This is the pattern of combining constructors and prototypes. This approach combines the advantages of the constructor pattern and the prototype pattern. This is the most commonly used pattern for creating objects.

4. Dynamic Prototype Pattern

The so-called dynamic prototype pattern is actually an encapsulation of the pattern of combining constructors and prototypes.
Look at the following code:

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

The reason why it is named dynamic prototype mode is because getMySon will change in different calls and is dynamic. The definition of the sayName function is only executed the first time getMySon is called.
In essence, the methods that do not need to be shared are still defined through the constructor, and the methods that need to be shared are defined through the prototype. Just put them together and encapsulate them.

The above is the detailed content of Introduction to several common modes of creating objects in javascript. For more information, please follow other related articles on the PHP Chinese website!