Javascript constructor details

What is a constructor

Constructors are common in object-oriented languages such as Java, C++, and PHP. In Javascript, the constructor is first a normal function that can be called with the new operator and generate a special type of object.

// "Benjamin" is a constructor

var benjamin = new Benjamin("zuojj", "male");

In the example above, Benjamin is a Benjamin object, so how is it instantiated?

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

var benjamin = new Benjamin("zuojj", "male");

//Outputs: Benjamin{sex: "male",username: "zuojj"}

console.log(benjamin);

As we've seen, the "Benjamin" constructor simply takes the passed arguments and assigns them to this object. This is because when the constructor is called by the new operator, the constructor's this object is assigned to the object returned by the new operation.
This means that the code above is equivalent to:

benjamin = {

 "username": "zuojj",

 "sex": "male"

}

Why use constructors

There are several reasons why constructors are used:
Using constructors means that all of these objects can be created using the same basic structure
2. Using constructors means that the "Benjamin" object is explicitly marked as an instance of the "Benjamin" function

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

var benjamin = new Benjamin("zuojj", "male");

var ben = {

 "username": "zuojj",

 "sex": "male"

}

//Outputs: true

console.log(benjamin instanceof Benjamin);

//Outputs: false

console.log(ben instanceof Benjamin);

3. The use of constructors means that we can define public methods on prototypes that can be Shared by multiple instances

function Benjamin(username, sex) {

    this.username = username;

    this.sex = sex;

}

Benjamin.prototype.getName = function() {

 return this.username;

}

var benjamin = new Benjamin("zuojj", "male");

var ben = new Benjamin("lemon", "female");

//Outputs: zuojj

console.log(benjamin.getName());

//Outputs: lemon

console.log(ben.getName());

Three, points for attention

1. The new keyword
Do not forget to use the new keyword when instantiating the constructor. Whether to use the new keyword has a great impact on this object. Without the new keyword, this object will point to the global object (window in browser and global in node). Therefore, when defining a constructor, it is recommended that the function name be capitalized.
2. If the function called does not have an explicit return expression, it will implicitly return this object, that is, the newly created object. Otherwise, the result will be affected, but only an object will be returned

function Bar() {

    return 2;

}

var bar = new Bar();

//Returns the newly created object 

//Outputs: Bar {} 

console.log(bar);

function Test() {

    this.value = 2;

    return {

        foo: 1

    };

}

var test = new Test();

//Returns an object 

//Outputs: Object {foo: 1} 

console.log(test); 

What we need to pay attention to is:
A) new Bar() returns the newly created object, not the literal 2 of the number. So new Bar().constructor === Bar, but if you return a numeric object, the result is different;
B) the new Test() obtained here is the object returned by the function, not the newly created object through the new keyword, as shown below:

function Bar() {

    return 2;

}

var bar = new Bar();

function BarN() {

 return new Number(2);

}

var barn = new BarN();

//Outputs: true

console.log(bar.constructor === Bar);

//Outputs: Number {} 

console.log(barn);

//Ouputs: false

console.log(barn.constructor === BarN);

//Outputs: true

console.log(barn.constructor === Number);



function Test() {

    this.value = 2;

    return {

        foo: 1

    };

}

var test = new Test();

//Outputs: undefined

console.log(test.value);

//Ouputs: 1

console.log(test.foo);