directory

  • What exactly does New do
  • Write a new method

What exactly does New do

Let’s start by writing a very simple piece of code that defines a Person class and uses new to create an instance of Person.

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function () {
  return `The ${this.firtName} The ${this.lastName}`;
};

const tb = new Person('Chen'.'Tianbao');
console.log(tb);
Copy the code

View the TB instance in a console.

We can see from the picture. The example contains the following:

  • Two attributes, firtName and lastName, are assigned.
  • The prototype has a getFullName method and a constructor.

After analyzing the example, it’s easy to see what new does.

  • Create a new object
  • Add attributes of the parent class to the new object and initialize it.
  • Inherits a method from a superclass stereotype.
  • Returns a new object. But? Is the above description completely correct?

I’m going to change our demo code a little bit. Add a return to the constructor.

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;

  return {
    fullName: `The ${this.firtName} The ${this.lastName}`
  };
}
Copy the code

In the console, see what the difference is.

It turns out that this is an actual instance after execution, and it returns a normal Object. This object is the result of a return.

Exploring further, what if instead of returning an object, a Nubmer and String were returned?

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;

  return 'demo';
}
Copy the code

From the console, you can see that it is the same as not writing return. All that is returned is the newly created Person instance.

After the above analysis, we can easily conclude what New has done.

  • Create a new object
  • Inherits a method from a superclass stereotype.
  • Add attributes of the parent class to the new object and initialize it. Save the execution result of the method.
  • Returns the result of execution if it has a return value and is an object; otherwise, returns the newly created object.

Once you know how to execute it, how to write a new method by hand. It’s going to be easy.

The code is as follows:

function _new(obj, ... rest){
  // Create a new object based on the obj prototype
  const newObj = Object.create(obj.prototype);

  // Add attributes to the newly created newObj and get the result of the obj function execution.
  const result = obj.apply(newObj, rest);

  If the result of the execution has a return value and is an object, the result of the execution is returned; otherwise, the newly created object is returned
  return typeof result === 'object' ? result : newObj;
}
Copy the code

Test it out.

const tb = new Person('Chen'.'Tianbao');
console.log(tb);

const tb2 = _new(Person, 'Chen'.'Tianbao');
console.log(tb2)
Copy the code

And what we find is that TB and Tb2 return exactly the same value.

The demo code

demo

That’s it. Congratulations.