takeaway

Creating objects using the form new Constructor() should be familiar, but have you explored what actually happens inside the new keyword? Let’s take a step towards unraveling its mystery.

1. Internal principle of constructors (Implicit syllogism)

Suppose we write a constructor that looks like this: Function Person(){} add a static prototype attribute to the Person constructor. This attribute is an object with two properties: constructor and __proto__

function Person(){};
// The following code is automatically added
Person.prototype = {
  constructor: Person,// Point to the Person constructor
  __proto__: Object// Point to an Object
}
Copy the code

We then create an object person with the new keyword, such as const person = new Persopn(); The following three steps take place inside the constructor:

  1. Step 1: On the first line of the function body, the system begins by adding the following code.

    function Person(){
  // step 1: Add the following code
  var this = {
    __proto__ : Person.prototype,
  };
}
Copy the code

  2. Step 2: Add attributes (manually)

    function Person(){
  // step 1: Add the following code
  var this = {
    __proto__ : Person.prototype,
  };
  // 2. Step 2: The code we manually added... , such as this. The age = 18
}
Copy the code

  3. Step 3: The system implicitly returns this

    function Person(){
  // step 1: Add the following code
  var this = {
    __proto__ : Person.prototype,
  };
  // 2. Step 2: The code we manually added... , such as this. The age = 18

  // 3. Step 3: Add the following code
  return this;
}
Copy the code

We call what happens inside the system when we build an object with the new keyword the implicit syllogism of constructors.

Let’s use a practical example to verify that the above three steps are executed correctly.

Example 1

function Person(name, age){
  this.age = age;
  this.name = name;
}
const person = new Person("lkj".18)
console.log(person)
Copy the code

The console output is as follows

Example 2

function Student(){}const student  = new Student();
console.log(student); 
Copy the code

The console output is as follows

More examples you can test and verify ah, here is no more examples.

Second, a different gift

We already know the this principle inside the constructor. Next, let’s take a closer look inside the constructor body. If we explicitly return a data, does the constructor still return this?

  1. The display returns a raw value

    function Test(){
  this.name = "lkj";
  this.age = 12;
  return 12;// The display returns a number
}
const test = new Test();
console.log(test);
Copy the code

    The console output is as follows

  1. Display returns an object

    function Test() {
  const obj = {
    number: 201730134057.sex: "male"
  }
  this.name = "lkj";
  this.age = 12;
  return obj; // Display returns an object
}
const test = new Test();
console.log(test); 
Copy the code

    The console prints the following result

conclusion

From the above example, we can know:

  • If you display an object in a constructor (e.gOrdinary objects,function,An array ofEtc.), then the implicit third step (return this) will not be implemented.
  • If you display a primitive value in a constructor (e.gdigital,string,Boolean valueEtc.), then the implicit third step (return this) will still execute while we displayreturn“Is ignored.

This article is mainly used for the peacetime review consolidation and accumulation, if there are writing mistakes in the place also hope you big guy generous comments.