Have you ever been confused by the new keyword in Javascript? Have you ever wondered what the difference between function and constructor is?

Most new Javascript developers don’t want to use the new keyword because it makes the code look like Java and can be a bit confusing to use; In this article I will try to clarify these things and explain how it works.

Talk about the function constructor

Constructor translates as a constructor, but for better understanding later, you’ll use constructor directly; In Javascript any function can be called constructor; Javascript does not make a clear distinction between the two; that is, function can be called as constructor or as a generic function.

Constructor = function with the new keyword

function  Person  ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
}

var person =  new  Person ( ) ; 
console . log ( person ) ;
Copy the code

Call “person” and it will create an object containing the contents of the person function and the property name and value:

What does new do to this process

When the new command is used, the functions that follow it perform the following four steps:

  1. Creates an empty object as an instance of the object to be returned.
  2. Point the empty object’s prototype to the constructor’sprototypeProperties.
  3. Assigns this empty object to the internalthisThe keyword.
  4. If the function does not return other objects, thennewThe function call in the expression automatically returns the new object.

That is, when we use the new keyword, an empty object is actually created first.

The People constructor is then executed, and the empty object’s prototype points to people.prototype.

We know that when the function executes, this will be created in the Execution Context, and when we use new, this in the function will be specified as the empty object that was created.

So when you perform the People function to this.firstName and this.lastName, because this now refers to the empty object, you’re actually giving the empty object an attribute name and an attribute value.

In this process, as long as the constructor People does not specify return as another object, it will return the newly created object directly to us.

Let’s take a closer look at the execution process with a piece of code:

function  Person  ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
  console . log ( 'This function has been executed.'); }var person =  new  Person ( ) ; 
console . log ( person ) ;
Copy the code

The result of the chrome call is as follows, indicating that the People function is actually executed when we use new to construct objects:

Using new will help us create an empty object

Now I’ll change our above code to something like this:

function  Person ( ) { 
  console . log ( this); }var person =  new  Person ( ) ; 
// console.log(person);
Copy the code

The code does help us create a new empty object in the process of executing this code:

If another object is returned at the end of the function, the content of the new object is overwritten

Now, let’s modify the original code slightly as follows:

function  Person  ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
  return   { "RETURN" : "The contents of this would not have been returned."}; }var person =  new  Person ( ) ; 
console . log ( person ) ;
Copy the code

If the constructor returns another object inside, the new command returns the object specified by the return statement, overwriting the original new object. Otherwise, this object is returned regardless of the return statement. The result is as follows:

Write a new implementation by hand

function create() {
	// Create an empty object
    var obj = new Object(),
	// Get the constructor, arguments remove the first argument
    Con = [].shift.call(arguments);
	// Link to the prototype, obj can access properties in the constructor prototype
    obj.__proto__ = Con.prototype;
	// Bind this to implement inheritance, obj can access the properties in the constructor
    var ret = Con.apply(obj, arguments);
	// Return the object returned by the constructor first
	return ret instanceof Object ? ret : obj;
};
Copy the code

Use this handwritten new

function Person() {... }// Use the built-in function new
var person = new Person(...)
                        
// Use the hand-written new, create
var person = create(Person, ...)
Copy the code

Code principle analysis:

  1. withnew Object()To create an objectobj
  2. Take the first argument, which is the constructor we’re passing in. In addition becauseshiftIt’s going to modify the original array, soargumentsIt gets rid of the first argument
  3. willobjThe prototype points to the constructor like thisobjYou can access the properties in the constructor prototype
  4. useapplyChange the constructorthisPoint to the newly created object like thisobjYou can access the properties in the constructor
  5. returnobj

A practical application of function constructor

From the above method, we can create a new object by using function. If we want to create object contents with the same property name but different property values, we can change the property values of the object to parameters, thus creating many different objects using this function constructor:

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

var person1 =  new  Person ( 'Jay' ,  'chou');console . log ( person1 ) ; 
var person2 =  new  Person ( 'Jane' ,  'chou');console . log ( person2 ) ;
Copy the code

In this way, we can create many different objects from the same constructor:

In addition, we will refer to objects created from constructors as instances, as mentioned in the previous article.

Attention! If we forget to add the new keyword

Here’s one thing to be careful about if you forget to include the new keyword in your code, for example:

function  Person  ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ;  
}

var person =  Person ( ) ; 
console . log ( person ) ;
Copy the code

So, because JavaScript doesn’t know whether you want to execute this function or create an object based on this function, undefined will be returned.

summary

  • The constructor is just a normal function, but we can use this function to create objects.
  • By adding the new operator to function, it creates a new object from the function this keyword, and then automatically returns the new object to you if you don’t specify another object inside the function.

How do we use function constructors to build our prototype? Let’s talk about that in the next article!

If you find this article helpful, please feel free to like and follow my GitHub blog. Thank you very much!