The new operator changes the direction of this during execution, so before we look at the new operator, let’s explain how this is used.

The use of this in the constructor

    function Person (name, age) {
      this.name = name
      this.age = age
    }

    console.log(new Person('xx'.18)); // Person {name: 'xx', age: 18}
Copy the code

The output contains information about name and age.

In fact, we don’t return anything. Why do we have name and age attributes in the output? One of them is the this keyword.

Let’s print this to see what this looks like.

    function Person (name, age) {
      console.log(this) // Peoson {}
      this.name = name
      this.age = age
    }

    new Person ('xx'.18)
Copy the code

We found that the value of this is the Person empty object. The last two statements are equivalent to adding the name and age attributes to the Person object. Let’s rewrite the Person function.

    function Person (name, age) {
      console.log(this)
      Person.name = name
      Person.age = age
    }
    new Person ('xx'.18) // Person {}
Copy the code

The name and age attributes are not included in the output.

Because in Javascript, if the constructor has no return value, the default is return this. In the above code, this is a Person empty object. The name and age attributes are simply added to the temporary variable Person. In order for the output to contain the name and age attributes, we return the temporary variable Person.

    function Person (name, age) {
      let Person = {}
      Person.name = name
      Person.age = age
      return Person
    }

    console.log(new Person ('xx'.18)) // {name: "xx", age: 18}
Copy the code

In other words, new Person does the same thing.

function Person(name, age) {
  // this = {}; (Implicitly created)

  // Add attributes to this
  this.name = name;
  this.age = age;

  // return this; (Implicit return)
}
Copy the code

From the above analysis, we understand the use of this in the constructor.

The relationship of this to the new operator

Generate an instance of the Person object with the new operator.

let Person = new Person()
Copy the code

The new operator does three things.

1.let person = {}
2.person.__proto__ = Person.prototype
3.Person.call(person)
Copy the code

Let’s define a custom function that looks like a new function to illustrate the above three lines of code.

    function Person (name, age) {
      this.name = name
      this.age = age
    }

    function New () {
      let obj = {}
      Person.apply(obj, arguments)
      return obj
    }

    console.log(New('xx'.18)) // {name: "xx", age: 18}
Copy the code

The return result also contains the name and age attributes, which proves that the new operator changes the reference to this. Person.apply(obj, arguments) calls this in the Person object to point to the obj object, which has the name and age attributes.

However, focus not only on the function itself of the new operator, but also on its stereotype properties.

The prototype property’s relationship to new

We add a sayHi function to the Prototype of Person and call the sayHi function from the object returned by New().

    function Person (name, age) {
      this.name = name
      this.age = age
    }

    Person.prototype.sayHi = function () {
      console.log('Hi! ');
    }
    
    console.log(New('xx'.18).sayHi()) // Uncaught TypeError: New(...) .sayHi is not a function
Copy the code

We found that the execution was wrong. The object returned by the New function did not call the sayHi method.

This is because the sayHi method is a function that belongs to the Person stereotype, and only objects on the Person stereotype chain can inherit the sayHi method. So what do we do?

The __proto__ attribute used here refers to the prototype of the function that created the instance. Set the __proto__ value of the obj object to the Person object’s prototype property, and the obj object inherits the sayHi method on the Person prototype.

    function Person (name, age) {
      this.name = name
      this.age = age
    }

    Person.prototype.sayHi = function () {
      console.log('Hi! ');
    }
    
    function New () {
      // Let obj = object.create (person.prototype)
      let obj = {}
      obj.__proto__ = Person.prototype
      Person.apply(obj, arguments)
      return obj
    }
    
    console.log(New('xx'.18).sayHi()) // Hi
Copy the code

The result is ‘Hi’, and the method call is successful.