What is a constructor in Javascript? Detailed explanation of how to use constructor instances

What is a constructor

In some object-oriented languages, such as Java, C++, and PHP, constructors are very common. In Javascript, the constructor is first an ordinary function, which can be called using the new operator and generates an object of a special type.

// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");

In the above example, 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 can see, the "Benjamin" constructor simply receives the parameters passed in and assigns them to the this object. This is because when the constructor is called by the new operator, the this object of the constructor is assigned the object returned by the new operation.
This means that the above code is equivalent to:

benjamin = {
 "username": "zuojj",
 "sex": "male"
}

Why use the constructor

Why use the constructor, there are the following reasons:
1. Using the constructor means that all these objects can be created using the same basic structure
2. Using the constructor 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. Using constructors means that we can define public methods on the prototype for sharing 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());

3. Precautions

1.new keyword
Don’t forget to use the new keyword when instantiating the constructor. Whether to use the new keyword or not has a great impact on the this object. If the new keyword is not used, the this object will point to Global objects (window in browser and global in node). Therefore, when defining a constructor, it is recommended that the first letter of the function name be capitalized.
2. If the called function does not have an explicit return expression, it will implicitly return the this object - that is, the newly created object. Otherwise, it will affect the returned result, but only if it returns an object.

function Bar() {
    return 2;
}
var bar = new Bar();
//返回新创建的对象
//Outputs: Bar {} 
console.log(bar);
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//返回的对象
//Outputs: Object {foo: 1} 
console.log(test);

What we need to pay attention to is:
a) new Bar() returns a newly created object, not the literal value 2 of the number. Therefore new Bar().constructor === Bar, but if a numeric object is returned, the result will be different;
b) The new Test() obtained here is the object returned by the function, rather than new through the new keyword The created object looks like this:

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

The above is the detailed content of What is a constructor in Javascript? Detailed explanation of how to use constructor instances. For more information, please follow other related articles on the PHP Chinese website!