Detailed explanation of the constructor pattern of JS design patterns

This time I will bring you the design pattern of JS Constructor pattern detailed explanation, what are the precautions when using JS constructor pattern, the following are Let’s take a look at practical cases.

Concept
The constructor is used to create an object of a specific type. We not only declare the object used, the constructor can also accept parameters to set the member values ​​​​of the object when it is first created. You can also declare properties and methods of custom type objects.

Function and precautions

Used to create objects of specific types.

Assign a value to the object when declaring it for the first time

You can pass parameters in, declare the constructor yourself, and assign attributes and methods

Notes:

Pay attention to the use of new

Distinguish the difference from singleton

Basic usage
InJavaScript, the constructor is usually considered to be used to implement instances, JavaScript does not The concept of a class, but with a special constructor. By using the new operation, we can tell JavaScript that we want to create a new object and the members of the new object are all defined in the constructor. In the constructor, this points to the newly created object. The basic syntax is as follows:

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314

This is the simplest method of constructing a function, but have we found a problem? When we inherit, have we It feels too troublesome, so we can add the ouput method to the created object through the prototype. Let's look at the following code

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112

In this way, the output single instance can be shared and used in the PersonBir object instance. We By capitalizing the function name when naming the constructor, it is easier to distinguish ordinary functions.

Forcing the use of the new operator
For the use of the new operator in the constructor, let's look at the following codes. We can force the use of the new operator by judging whether the instanceof of this value is PersonBir to achieve the purpose. .

function PersonBir(name, year, month) {
    //核心代码，如果为假，就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

js design pattern - the use of singleton pattern

Why should the front end use modularity?

Solutions to common CSS compatibility issues

The above is the detailed content of Detailed explanation of the constructor pattern of JS design patterns. For more information, please follow other related articles on the PHP Chinese website!