preface

Today we will take a look at another interview frequently handwritten question: new, we also first to understand the principle of the new keyword, and then we will masturbate a simple version of their own

Pre –

Also, before writing code by hand, we should clarify a few questions:

  • What is the principle of the new keyword?
  • What is the use of the new keyword?
  • What are the steps involved in implementing a new keyword?

OK, once we know what we want, let’s get started!

The principle of the new

Let’s start by looking at the description of new in MDN: The new operator creates an instance of a user-defined object type or of a built-in object with a constructor

Is it still vague? It’s ok (the official definition usually looks like this), so let’s use our understanding to interpret it:

The main function of new is to execute a constructor and return an instance object, in the process to determine whether it can accept the passing of arguments

Do you feel or don’t understand? Let’s look at two code examples:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const car1 = new Car('USA'.'TSL'.1993)
console.log(car1, car1.year) 
// { make: 'USA', model: 'TSL', year: 1993 } 1993
Copy the code

When not using new:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const car1 = Car('USA'.'TSL'.1993)
console.log(car1, car1.year)
// undefined Cannot read property 'year' of undefined
Copy the code

Is there any doubt about the result? Car1 is an instance object generated by the Car constructor. We can compare the two examples to see what new does:

  • Start by creating a new object
  • Then assign the constructor’s scope to the new object (this refers to the new object)
  • Executes the code inside the constructor (in this case, adding attributes to the new object)
  • Finally, the new object is returned

What does new do

The other case

Now, what if new returns an object? Let’s look at the code:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  return {boss: Musk}}const car1 = new Car('USA'.'TSL'.1993)
console.log(car1, car1.year, car1.boss)
// { boss: '马斯克' } undefined '马斯克'
Copy the code

We can see from this code that if the constructor returns an object at the end, then the new object will be returned directly after passing new, instead of returning the new generated this object

What if the return doesn’t return an object? Let’s also look at the code:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
  return Musk
}
const car1 = new Car('USA'.'TSL'.1993)
console.log(car1, car1.year)
// { make: 'USA', model: 'TSL', year: 1993 } 1993
Copy the code

We find that if the return does not return an object, the result will return the newly generated object

Can we conclude that new always returns an object, either an instance of the constructor or an object returned after return

Implement new

OK, after the above exploration, we have a basic understanding of how new works. Now we will complete a basic new according to this process. Let’s go directly to the code:

New / / simulation
const createNew = (Con, ... args) = > {
  Create a new empty object
  const obj = {}
  //2, bind this to an empty object
  // Make the empty object's __proto__ point to the constructor's prototype
  obj.__proto__ = Con.prototype
  // add attributes to the empty object
  let result = Con.apply(obj, args)
  If so, return the value of the constructor. If not, return the created object
  return result instanceof Object ? result : obj
}

/ / test
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const car1 = createNew(Car, 'USA'.'TSL'.1993)
console.log(car1, car1.year)
// { make: 'USA', model: 'TSL', year: 1993 } 1993
Copy the code

So, after testing this code, do we find that the process we analyzed above is consistent? So now I need you to write a new by hand, can you do that?

At the end of the article

Welcome to pay attention to the “front-end light and shadow” public account, the public account is in the form of the system thematic module to show, so it looks more convenient, system, let us continue to learn all kinds of front-end knowledge, come on