1. Constructor

Functions can act as constructors, and constructors can be used to create new objects. This is one of the things that makes JavaScript object-oriented. The advantage of using constructors is that you will be able to create as many objects as possible with predefined properties and methods.

The JS language uses constructors as templates for objects. A constructor is a function that provides a template for generating an object and describes the basic structure of the object. A constructor that can generate multiple objects, each with the same structure.

Take a look at the basic structure of the constructor.
Var Play = function() {2, this.height = 180; 3,}; 4, // 5, function Play() {6, this.height = 180; / 7,}Copy the code

In the above code, Play is the constructor that provides the template used to generate the object instance. To distinguish constructor names from normal functions, the first letter is usually capitalized.

Constructors have three characteristics:

The first letter of a constructor’s function name is usually capitalized. The this keyword is used inside the function to represent the instance of the object to be generated. When an object is generated, the constructor must be called using the new command.

2. The new command

(1) Basic principles

The new command executes a constructor and returns an object instance. When you use the new command, the function call that follows it is not a normal call, but instead follows the following steps.

Creates an empty object as an instance of the object to be returned. Points the empty object’s prototype to the constructor’s Prototype property. Assigns an empty object to the this keyword inside the constructor. Start executing the code inside the constructor.

  • That is, inside the constructor, this refers to a newly generated empty object on which all operations on this will take place. The purpose of a constructor is to manipulate an empty object (this object) to make it look like it needs to.
  • That’s the rationale for the new command, and it’s important. The following examples are used to verify the process of this principle.

(2) Basic usage

The new command calls a constructor and returns an object instance.
1, function Play() {2, this.height = 180; 3,} 4, var p = new Play(); 5, alert (p.h eight); / / 180Copy the code

With the new command, the constructor Play generates an instance of an object and assigns it to the global variable p. This newly generated object instance inherits the height attribute from the constructor Play. This means that the object instance has no height property. When the new command is executed, it represents the newly generated object instance P. This. height indicates that the object instance has a height property, which has a value of 180. When using the new command, the constructor can also accept arguments as needed.

Function Play(width, height) {2, this.width= width; 3, this. Height = height; } 5, var p = new Play(200, 100); 6, the console. The log (p.w idth); / / 200. 7, the console log (p.h eight); Var l = new Play(300, 200); 9, the console. The log (l.w idth); / / 300. 10, the console log (l.h eight); / / 200Copy the code

Using one of the above examples, we will take a look at the characteristics of constructors and the new fundamentals.

  • In the above code, we first create a constructor called Play, passing in two arguments width and height. The Play constructor uses the this keyword inside to point to the object instance to be generated.
  • We then use the new command to create two object instances p and L.
  • When we call the constructor with new, the new command creates an empty object, P, to be returned as the instance object. The empty object’s prototype then points to the Play constructor’s Prototype property. P.prototype === play. prototype Note that the empty object points to the Constructor Play’s Prototype property, not to the constructor itself. We then assign the empty object to the this keyword inside the constructor. That is, let the this keyword inside the constructor point to an object instance. Finally, the constructor internal code is executed.
  • Since object instances P and L do not have width and height attributes, both attributes in the object instance are inherited from the constructor Play. This means that the constructor is the function that generates the object, that provides the template for the object.

Warning:

What happens if we forget to call the constructor with the new command and call the constructor instead?

In this case, the constructor becomes a normal function and does not generate instance objects. And for reasons we’ll see later, this represents a global object, which can cause some unexpected results.

1, function Play() {2, this.height = 180; 3,} 4, var p = Play(); 5, the console. The log (p.h eight); //p is undefined 6, console.log(window.height); / / 180Copy the code

In the above code, we forgot to add the new command when calling the Play constructor. The result is that this points to the global scope, and height becomes the global variable. And the variable p becomes undefined. Play() does not return a value, so person is not assigned, so you should be very careful not to call the constructor directly without using the new command.

If the constructor has a return statement inside it
Function play(width,height,num){2, this.width=width; 3, enclosing height = height; 4, enclosing num = num; 5, enclosing the autoplay = function () {6, alert (" # # # # # # # # # # # # # "); Function (){} 9, return this; 10,} 11, var p=new play(300,200,8); 12, alert (p.w idth); / / 13, 300 p.a utoplay (); / / # # # # # # # # # # # # #Copy the code
On the other hand, using the new command on ordinary functions (functions that do not have the this keyword inside them) returns an empty object.
1, function Play() {2, return 'this is a pig'; 3,} 4, var p = new Play(); 5, alert (p); //[object Object]Copy the code

In the code above, using the new command on the normal Play function creates an empty object. This is because the new command always returns an object, either an instance object or an object or array specified by the return statement. In this case, the return statement returns the string of the object, so the new command ignores it.