Detailed explanation of examples of constructor and new operator in JavaScript

Detailed explanation of examples of constructors and new operators in JavaScript

｛…｝ syntax allows the creation of one object, but if we need to create multiple similar objects, we Requires use of constructor and "new" operator.

Constructor

Constructor is technically a normal function, but there are generally two conventions:
1. The first letter of their name is capitalized.
2. They should only be executed using the new operator.

Example:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

Let’s take a look at what is done behind the scenes when executing new User()?
1. First create an empty object and then assign it to this.
2. Execute the function, usually modify this object and add some new attributes.
3. this is returned.

In other words, the content of new User() is as follows:

function User(name) {
  // this = {};  (implicitly)

  // we add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}

So the result of new User("Jack") is The following code is consistent:

let user = {
  name: "Jack",
  isAdmin: false
};

Now we want to create other objects, we can use new User("Ann"), new User("Alice"), etc. Shorter and easier to read than using text every time to describe an object.
The main purpose of the constructor at this time is to achieve code reuse for creating objects.

Let us pay attention again:
Technically, any function can be used as a constructor, i.e. any function can be called using new and also perform the algorithm described above.
Capitalizing the first letter is just a general convention to make it clearer that it is a Korean constructor and should be called using new.

new function(){…}
If we have multiple lines of code for creating a complex object, we can wrap them using a constructor, the code is as follows:

  let user = new function() { 
     this.name = “John”; 
     this.isAdmin = false;
  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

The constructor cannot be called again because it is not saved and is only called to create the object. The purpose of this technique is simply to encapsulate a single complex object code.

Dual-use constructor: new.target

Inside the function, we can check whether its calling method uses the new method. This can be done using a special attribute new.target.
The value is empty when called normally, and the value is the function when called through new.

function User() {
  alert(new.target);
}

User(); // undefined
new User(); // function User { ... }

The following code can achieve the same effect using the conventional method and the new operation method.

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

This method is used in some libraries to make the code more flexible. But it is not a good thing to use it everywhere, because it is not obvious enough for those who are familiar with the internal situation of the User object.

Constructor return value

Usually constructors do not need a return value statement. Its task is to write some necessary content into this object and then automatically return it.
But if there is a return statement, the rule is simple:
- If return returns an object, then this is returned instead of this.
- If return returns the original type, it is ignored and this is still returned.

In other words, return either returns an object or this. The following example returns an object instead of this. The example is as follows:

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns an object
}

alert( new BigUser().name );  // Godzilla, got that object

This example returns empty or is writing a primitive type. In fact, it does not matter. Influence.

function SmallUser() {

  this.name = "John";

  return; // finishes the execution, returns this

  // ...

}

alert( new SmallUser().name );  // John

Most constructors do not need to return. This special behavior is reminded here just for the sake of intellectual completeness.

Ignore brackets
By the way, when calling the constructor, if there are no parameters, we can omit the brackets after the object identifier.

let user = new User; // <-- no brackets
// same as
let user = new User();

Ignoring parentheses is not a good coding style, but it is allowed in the specification.

Methods in constructors

Using constructors to create objects provides great flexibility, and different objects can be defined by providing parameters.
Of course, we not only add attributes to this, but also add methods.

The following example creates an object, uses the name parameter, and adds a method sayHi:

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/

Summary

• The constructor, or constructor for short, is an ordinary Functions, but there is a general convention that the first letter of the name is capitalized.

• The constructor is called using new, that is, it starts to create an empty this object, and then returns this with filled content.

We can use the constructor to create multiple similar objects. This is not the only content of the day, which will be further explained later.
Javascript provides constructors for some built-in objects, such as Date, Set, etc.

The above is the detailed content of Detailed explanation of examples of constructor and new operator in JavaScript. For more information, please follow other related articles on the PHP Chinese website!