JavaScript: constructor mode in Design Mode

JavaScript: constructor mode in Design Mode
Introduction

Constructors are familiar to everyone, but if you are a newbie, you still need to know what constructor is. The constructor is used to create a specific type of object-not only declares the used object, but also accepts parameters for the constructor to set the object member value when the object is created for the first time. You can customize your own constructor and declare the attributes or methods of the custom type object in it.

Basic usage

In JavaScript, constructor is generally considered to be used to implement instances. JavaScript does not have the concept of classes, but has special constructor. The new keyword is used to call the defined functions. You can tell JavaScript that you want to create a new object and the member declarations of the new object are defined in the constructor. Within the constructor, The this keyword references the newly created object. The basic usage is as follows:

Function Car (model, year, miles) {this. model = model; this. year = year; this. miles = miles; this. output = function () {return this. model + follows + this. miles + km; };}var tom = new Car (uncle, 2009,200 00); var dudu = new Car (Dudu, 2010,500 0); console. log (tom. output (); console. log (dudu. output ());

The above example is a very simple constructor mode, but it is a little problematic. First, it is very troublesome to use inheritance. Secondly, output () is redefined every time an object is created. The best way is to share this output () with all Car-type instances () in this way, if there are a large number of instances, it will save a lot of memory.

To solve this problem, we can use the following method:

Function Car (model, year, miles) {this. model = model; this. year = year; this. miles = miles; this. output = formatCar;} function formatCar () {return this. model + follows + this. miles + km ;}

Although this method is available, we have the following better methods.

Constructor and prototype

In JavaScript, a function has a prototype attribute. When a constructor is called to create an object, all attributes of the constructor prototype are available on the newly created object. In this way, multiple Car object instances can share the same prototype. let's expand the code of the previous example:

Function Car (model, year, miles) {this. model = model; this. year = year; this. miles = miles;}/* Note: The Object is used here. prototype. method Name, not Object. prototype is mainly used to avoid rewriting and defining prototype objects */Car. prototype. output = function () {return this. model + follows + this. miles + km;}; var tom = new Car (uncle, 2009,200 00); var dudu = new Car (Dudu, 2010,500 0); console. log (tom. output (); console. log (dudu. output ());

Here, an output () instance can be shared among all Car object instances.

In addition, we recommend that constructors start with an uppercase letter to distinguish common functions.

Can only use new?

In the above example, the car function uses new to create objects. Is this the only method available? There are other methods as follows:

Function Car (model, year, miles) {this. model = model; this. year = year; this. miles = miles; // customize an output content this. output = function () {return this. model + follows + this. miles + km;} // Method 1: Call Car as a function (uncle, 2009,200 00); // Add it to the console on the window object. log (window. output (); // Method 2: Call var o = new Object (); Car. call (o, Dudu, 2010,500 0); console. log (o. output ());

Method 1 of the Code is a bit special. If new does not apply to calling a function directly, this points to the Global Object window. Let's verify it:

// Call var tom = Car as a function (uncle, 2009,200 00); console. log (typeof tom); // undefinedconsole. log (window. output (); // uncle traveled 20000 kilometers

At this time, the object tom is undefined, and window. output () will output the result correctly. If the new keyword is used, the problem is not found. The verification is as follows:

// Use the new Keyword var tom = new Car (uncle, 2009,200 00); console. log (typeof tom); // objectconsole. log (tom. output (); // uncle traveled 20000 kilometers

Force use new

The above example shows the question of not using new. Is there any way for the constructor to force the use of the new keyword? The answer is yes. The Code is as follows:

Function Car (model, year, miles) {if (! (This instanceof Car) {return new Car (model, year, miles);} this. model = model; this. year = year; this. miles = miles; this. output = function () {return this. model + follows + this. miles + km;} var tom = new Car (uncle, 2009,200 00); var dudu = Car (Dudu, 2010,500 0); console. log (typeof tom); // objectconsole. log (tom. output (); // uncle took the 20000 km console. log (typeof dudu); // objectconsole. log (dudu. output (); // Dudu traveled 5000 kilometers

Determine whether to return the new Car or continue executing the code by judging whether the instanceof this is Car. If the new keyword is used, the (this instanceof Car) is true and the following parameter assignment will continue, if new is not used, (this instanceof Car) is false, and a new instance is returned.

Original packaging function

In JavaScript, there are 3 original packaging functions: number, string, boolean, and sometimes both use:

// Use the original packaging function var s = new String (my string); var n = new Number (101); var B = new Boolean (true ); // We recommend this var s = my string; var n = 101; var B = true;

We recommend that you use these packaging functions only when you want to retain the value status. For the difference, refer to the following code:

// Original stringvar greet = Hello there; // use the split () method to separate greet. split ('') [0]; // Hello // No greet error will be returned if you add a new attribute to the original type. smile = true; // This value cannot be obtained for a single account (we have explained why in Chapter 18 ECMAScript implementation) console. log (typeof greet. smile); // undefined // original stringvar greet = new String (Hello there); // use the split () method to separate greet. split ('') [0]; // Hello // No greet error will be returned if you add a new property to the function type. smile = true; // you can access the console of the new property normally. log (typeof greet. smile); // boolean

Summary

This chapter mainly explains the differences between the usage method, call method, and new Keyword of the constructor mode. I hope you will pay attention to it when using it.