We all know that stereotypes and chain of stereotypes are one of the most classic problems in JavaScript, and constructors are the basis of them, so understanding constructors and how they are executed can help us learn more about them.

This article explores constructors from the following aspects:

1. What is a constructor

2. Why use constructors

3. Constructor execution process

4. Return value of the constructor

1. What is a constructor

In JavaScript, functions called with the new keyword are called constructors.

2. Why use constructors

Study each concept not only to know what it is, but also to know why and what kind of problem it solves.

For example, we want to input the personal information of every student in Class 1, Grade 1, so we can create some objects, such as:

var p1 = { name: 'zs', age: 6, gender: 'male', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: 'woman', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: 'woman', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: 'male', hobby: 'football' };
// ...
Copy the code

As above, we can treat each student’s information as an object. However, we will find that we write a lot of meaningless code repeatedly. For example, name, age, gender, and hobby. If there are 60 students in this class, we have to repeat it 60 times.

This is where the advantages of constructors come into play. We found that each student had the name, gender, and hobby attributes, but they were all different, so we passed them in as arguments to the constructor. Since we are all first-grade students, age is basically 6 years old, so we can write death, and we can deal with it separately in special cases. At this point, we can create the following function:

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}
Copy the code

Once the above function is created, we can call it with the new keyword, that is, we can create the object with the constructor.

var p1 = new Person('zs'.'male'.'basketball');
var p2 = new Person('ls'.'woman'.'dancing');
var p3 = new Person('ww'.'woman'.'singing');
var p4 = new Person('zl'.'male'.'football');
// ...
Copy the code

At this point, you will find it very convenient to create objects. So, although the process of encapsulating the constructor is a bit of a hassle, once it is wrapped, it becomes very easy to create the object again, which is why we use constructors.

When you use object literals to create a series of objects of the same type that may have similar characteristics (properties) and behaviors (methods), you create a lot of duplicate code, and using constructors allows you to reuse that code.

3. Constructor execution process

Let me start with some basic concepts.

function Animal(color) {
  this.color = color;
}
Copy the code

When a function is created, we do not know whether it is a constructor or not, even if the function name is uppercase, as in the example above. A function can only be called as a constructor if it is called with the new keyword. Like this:

var dog = new Animal("black");
Copy the code

We will discuss only the execution of the constructor, which is called with the new keyword.

Let’s use the Person example above.

function Person(name, gender, hobby) {
  this.name = name;
  this.gender = gender;
  this.hobby = hobby;
  this.age = 6;
}

var p1 = new Person('zs'.'male'.'basketball');
Copy the code

In this case, the constructor will execute as follows:

(1) when thenewWhen the keyword is called, a new memory space is created, labeled Animal instance.

(2) inside the function bodythisPoint to the memory

Through the above two steps, we can come to this conclusion.

var p2 = new Person('ls'.'woman'.'dancing'); // Create a new memory#f2
var p3 = new Person('ww'.'woman'.'singing'); // Create a new memory#f3
Copy the code

Each time an instance is created, a new memory space is created (#f2, #f3). When #f2 is created, this in the function body points to #f2, and when #f3 is created, this in the function body points to #f3.

(3) Execute the code inside the function

As you can see, adding a property to this is the same thing as adding a property to an instance.

(4) Return this by default

Since this inside the function body refers to the newly created memory space, this is returned by default, which is the same as #f1 in the figure above. At this point, the memory space of #f1 is accepted by the variable P1. That is, the variable p1, which holds the memory address #f1, is marked as an instance of Person.

This is the entire execution of the constructor.

4. Return value of the constructor

The last step in constructor execution is to return this by default. By implication, there are other cases for the return value of a constructor. Let’s talk about the return value of the constructor.

(1) Return this by default without manually adding a return value

function Person1() {
  this.name = 'zhangsan';
}

var p1 = new Person1();
Copy the code

According to the above, let’s review. First, when called with the new keyword, a new memory space #f11 is generated and marked as an instance of Person1; Next, the this inside the function body points to the memory space #f11; Execute code inside the function body; Since this inside the function body points to this memory space, which is received by the variable P1, p1 will have a name attribute with a value of ‘zhangsan’.

p1: {
  name: 'zhangsan'
}
Copy the code

(2) Manually add a return value for the primitive data type, and return this

function Person2() {
  this.age = 28;
  return50; } var p2 = new Person2(); console.log(p2.age); / / 28Copy the code
p2: {
  age: 28
}
Copy the code

If the above call were a normal function, the return value would be 50.

(3) Manually add the return value of a complex data type (object), and finally return the object

Let’s go straight to the example

function Person3() {
  this.height = '180';
  return ['a'.'b'.'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'
Copy the code

Let’s do another example

function Person4() {
  this.gender = 'male';
  return { gender: 'neutral' };
}

var p4 = new Person4();
console.log(p4.gender);  // 'neutral'
Copy the code

The return value of the constructor is just one of these cases, so you can try it out and remember it.

In conclusion, this article introduces constructors from four aspects, and constructors are the foundation of learning about prototypes and prototype chains, so it is worth taking some time to learn about constructors. In the next article, I will talk about prototype chains that everyone can understand.

Finally finally, what I said is not necessarily right, you must try yourself!

(End of article)